slider completion

4 years ago · 2e825848d4
5 changed files with 1837 additions and 36 deletions
--- a/index.html
+++ b/index.html
@ -2,9 +2,11 @@
 <html lang="en">
 <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
+    <link rel="stylesheet" type="text/css" href="jquery.bxslider.css">
+    <script src="jquery-3.5.1.js"></script> 
+    <script src="jquery-3.5.1.min.js"></script>
+    <script src="jquery.bxslider.js"></script>
    <script src="myScript1.js"></script> 
-    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
-  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
@ -23,13 +25,11 @@
      <a href="#" class="next round">&#8250;</a>
      
 <div id="slider">
-    <figure>
-        <img src="../Project/buildings/buildings/1.png"  alt="building">
-        <img src="../Project/buildings/buildings/2.png"  alt="building">
-        <img src="../Project/buildings/buildings/3.png"  alt="building">
-        <img src="../Project/buildings/buildings/4.png"  alt="building">
-        <img src="../Project/buildings/buildings/5.png"  alt="building">
-    </figure>
+    <div class="item"><img src="../Project/buildings/buildings/1.png"  alt="building"></div>
+    <div class="item"><img src="../Project/buildings/buildings/2.png"  alt="building"></div>
+    <div class="item"><img src="../Project/buildings/buildings/3.png"  alt="building"></div>
+    <div class="item"><img src="../Project/buildings/buildings/4.png"  alt="building"></div>
+    <div class="item"><img src="../Project/buildings/buildings/5.png"  alt="building"></div>
        </div>
 </body>
 </html>
--- a/jquery.bxslider.css
+++ b/jquery.bxslider.css
@ -0,0 +1,177 @@
+/** VARIABLES
+===================================*/
+/** RESET AND LAYOUT
+===================================*/
+.bx-wrapper {
+  position: relative;
+  margin-bottom: 60px;
+  padding: 0;
+  *zoom: 1;
+  -ms-touch-action: pan-y;
+  touch-action: pan-y;
+}
+.bx-wrapper img {
+  max-width: 100%;
+  display: block;
+}
+.bxslider {
+  margin: 0;
+  padding: 0;
+}
+ul.bxslider {
+  list-style: none;
+}
+.bx-viewport {
+  /*fix other elements on the page moving (on Chrome)*/
+  -webkit-transform: translatez(0);
+}
+/** THEME
+===================================*/
+.bx-wrapper {
+  -moz-box-shadow: 0 0 5px #ccc;
+  -webkit-box-shadow: 0 0 5px #ccc;
+  box-shadow: 0 0 5px #ccc;
+  border: 5px solid #fff;
+  background: #fff;
+}
+.bx-wrapper .bx-pager,
+.bx-wrapper .bx-controls-auto {
+  position: absolute;
+  bottom: -30px;
+  width: 100%;
+}
+/* LOADER */
+.bx-wrapper .bx-loading {
+  min-height: 50px;
+  background: url('images/bx_loader.gif') center center no-repeat #ffffff;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2000;
+}
+/* PAGER */
+.bx-wrapper .bx-pager {
+  text-align: center;
+  font-size: .85em;
+  font-family: Arial;
+  font-weight: bold;
+  color: #666;
+  padding-top: 20px;
+}
+.bx-wrapper .bx-pager.bx-default-pager a {
+  background: #666;
+  text-indent: -9999px;
+  display: block;
+  width: 10px;
+  height: 10px;
+  margin: 0 5px;
+  outline: 0;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+}
+.bx-wrapper .bx-pager.bx-default-pager a:hover,
+.bx-wrapper .bx-pager.bx-default-pager a.active,
+.bx-wrapper .bx-pager.bx-default-pager a:focus {
+  background: #000;
+}
+.bx-wrapper .bx-pager-item,
+.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
+  display: inline-block;
+  vertical-align: bottom;
+  *zoom: 1;
+  *display: inline;
+}
+.bx-wrapper .bx-pager-item {
+  font-size: 0;
+  line-height: 0;
+}
+/* DIRECTION CONTROLS (NEXT / PREV) */
+.bx-wrapper .bx-prev {
+  left: 10px;
+  background: url('images/controls.png') no-repeat 0 -32px;
+}
+.bx-wrapper .bx-prev:hover,
+.bx-wrapper .bx-prev:focus {
+  background-position: 0 0;
+}
+.bx-wrapper .bx-next {
+  right: 10px;
+  background: url('images/controls.png') no-repeat -43px -32px;
+}
+.bx-wrapper .bx-next:hover,
+.bx-wrapper .bx-next:focus {
+  background-position: -43px 0;
+}
+.bx-wrapper .bx-controls-direction a {
+  position: absolute;
+  top: 50%;
+  margin-top: -16px;
+  outline: 0;
+  width: 32px;
+  height: 32px;
+  text-indent: -9999px;
+  z-index: 9999;
+}
+.bx-wrapper .bx-controls-direction a.disabled {
+  display: none;
+}
+/* AUTO CONTROLS (START / STOP) */
+.bx-wrapper .bx-controls-auto {
+  text-align: center;
+}
+.bx-wrapper .bx-controls-auto .bx-start {
+  display: block;
+  text-indent: -9999px;
+  width: 10px;
+  height: 11px;
+  outline: 0;
+  background: url('images/controls.png') -86px -11px no-repeat;
+  margin: 0 3px;
+}
+.bx-wrapper .bx-controls-auto .bx-start:hover,
+.bx-wrapper .bx-controls-auto .bx-start.active,
+.bx-wrapper .bx-controls-auto .bx-start:focus {
+  background-position: -86px 0;
+}
+.bx-wrapper .bx-controls-auto .bx-stop {
+  display: block;
+  text-indent: -9999px;
+  width: 9px;
+  height: 11px;
+  outline: 0;
+  background: url('images/controls.png') -86px -44px no-repeat;
+  margin: 0 3px;
+}
+.bx-wrapper .bx-controls-auto .bx-stop:hover,
+.bx-wrapper .bx-controls-auto .bx-stop.active,
+.bx-wrapper .bx-controls-auto .bx-stop:focus {
+  background-position: -86px -33px;
+}
+/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
+.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
+  text-align: left;
+  width: 80%;
+}
+.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
+  right: 0;
+  width: 35px;
+}
+/* IMAGE CAPTIONS */
+.bx-wrapper .bx-caption {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background: #666;
+  background: rgba(80, 80, 80, 0.75);
+  width: 100%;
+}
+.bx-wrapper .bx-caption span {
+  color: #fff;
+  font-family: Arial;
+  display: block;
+  font-size: .85em;
+  padding: 10px;
+}
--- a/jquery.bxslider.js
+++ b/jquery.bxslider.js
--- a/myScript1.js
+++ b/myScript1.js
@ -12,3 +12,28 @@ window.onload=function()  {
  } 
 }

+$(function() {
+  $('#slider').bxSlider({
+    auto: true,
+             autoControls: true,
+             controls: true,
+             infiniteLoop: true,
+             mode: 'horizontal',
+             autoDirection: 'next',
+             responsive: true,
+             preloadImages: 'all',
+             autoDelay: 0,
+             randomStart: false,
+             pager: false,
+             moveSlideQty: 1,
+useCSS: false,
+speed: 750,
+    slideSelector: 'div.item',
+    minSlides: 3,
+    maxSlides: 3,
+    moveSlides: 1,
+    slideWidth: 1000
+
+  });
+});
+
--- a/mystyle.css
+++ b/mystyle.css
@ -1,38 +1,30 @@
 #slider {
    overflow: hidden;
-}
-
-#slider figure {
    align-items: center;
-    position: absolute;
+    position: relative;
    width: 300%;
    margin: 0;
    left: 0;
-    animation:  slider 5s linear 1s infinite;
-}
    
-
-#slider figure img {
    float: left;
+}

+ .item {
+  float: left;
+  width: 100%;
+  
+}
+ .item:after {
+  content: "";
+  width: 2px;
+  height: 100%;
+  background: #f5f5f5;
+  position: absolute;
+  right: 0;
+  top: 0;
 }

-  @keyframes slider {
-    0% {
-        left:0;
-    }
-    
-    25% {
-        left: -25%;
-    }
-    
-    75% {
-        left: -50%;
-    }
-    100% {
-        left: -75%;
-    }
-  }
+  


 #black {