adding navigation arrows

4 years ago · d84a25d74c
3 changed files with 35 additions and 11 deletions
--- a/index.html
+++ b/index.html
@ -7,22 +7,23 @@
    <script src="jquery-3.5.1.min.js"></script>
    <script src="jquery.bxslider.js"></script>
    <script src="myScript1.js"></script> 
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
 </head>
 <body>
-    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
-    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
-    <script type="text/javascript" src="slick/slick.min.js"></script>
    <div id="black">BLUE</div>
    <div id="white">CUBE</div>
    <div id="CG">Casa Grande</div>
+    <br>
    <div id="myProgress">
        <div id="myBar"></div>
      </div>
-      <a href="#" class="previous round">&#8249;</a>
-      <a href="#" class="next round">&#8250;</a>
+      <div class="outside">
+        <p><span id="slider-prev"></span>  <span id="slider-next"></span>
+        </p>
+    </div>
      
 <div id="slider">
    <div class="item"><img src="../Project/buildings/buildings/1.png"  alt="building"></div>
--- a/jquery.bxslider.css
+++ b/jquery.bxslider.css
@ -88,7 +88,26 @@ ul.bxslider {
  font-size: 0;
  line-height: 0;
 }
-/* DIRECTION CONTROLS (NEXT / PREV) */
+
+.bx-wrapper .bx-controls .bx-has-controls-direction{
+  top: 100%;
+margin-top: -0px;
+vertical-align: top;
+}
+
+.bx-wrapper .bx-controls-direction a {
+top: 100%;
+margin-top: -0px;
+vertical-align: top;
+}
+.bx-wrapper .bx-prev {
+  vertical-align: top;
+}
+
+.bx-wrapper .bx-next {
+  vertical-align: top;
+}
+/* DIRECTION CONTROLS (NEXT / PREV) 
 .bx-wrapper .bx-prev {
  left: 10px;
  background: url('images/controls.png') no-repeat 0 -32px;
@ -117,7 +136,7 @@ ul.bxslider {
 }
 .bx-wrapper .bx-controls-direction a.disabled {
  display: none;
-}
+}*/
 /* AUTO CONTROLS (START / STOP) */
 .bx-wrapper .bx-controls-auto {
  text-align: center;
--- a/myScript1.js
+++ b/myScript1.js
@ -12,10 +12,9 @@ window.onload=function()  {
  } 
 }

-$(function() {
-  $('#slider').bxSlider({
+$(document).ready(function(){
+ $('#slider').bxSlider({
    auto: true,
-             autoControls: true,
             controls: true,
             infiniteLoop: true,
             mode: 'horizontal',
@ -28,11 +27,16 @@ $(function() {
             moveSlideQty: 1,
 useCSS: false,
 speed: 750,
+hideControlOnEnd: true,
    slideSelector: 'div.item',
    minSlides: 3,
    maxSlides: 3,
    moveSlides: 1,
-    slideWidth: 1000
+    slideWidth: 1000,
+    nextSelector: '#slider-next',
+    prevSelector: '#slider-prev',
+    nextText: '<i class="fa fa-arrow-circle-right fa-3x"></i>',
+        prevText: '<i class="fa fa-arrow-circle-left fa-3x"></i>'

  });
 });