rosh
/
Project1
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

adding navigation arrows

master
rosh 4 years ago
parent
2e825848d4
commit
d84a25d74c
3 changed files with 35 additions and 11 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 11
      index.html
  2. 23
      jquery.bxslider.css
  3. 10
      myScript1.js

11
index.html
View File

@ -7,22 +7,23 @@
<script src="jquery-3.5.1.min.js"></script> <script src="jquery-3.5.1.min.js"></script>
<script src="jquery.bxslider.js"></script> <script src="jquery.bxslider.js"></script>
<script src="myScript1.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 charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title> <title>Document</title>
</head> </head>
<body> <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="black">BLUE</div>
<div id="white">CUBE</div> <div id="white">CUBE</div>
<div id="CG">Casa Grande</div> <div id="CG">Casa Grande</div>
<br>
<div id="myProgress"> <div id="myProgress">
<div id="myBar"></div> <div id="myBar"></div>
</div> </div>
<a href="#" class="previous round">&#8249;</a> <div class="outside">
<a href="#" class="next round">&#8250;</a> <p><span id="slider-prev"></span> <span id="slider-next"></span>
</p>
</div>
<div id="slider"> <div id="slider">
<div class="item"><img src="../Project/buildings/buildings/1.png" alt="building"></div> <div class="item"><img src="../Project/buildings/buildings/1.png" alt="building"></div>

23
jquery.bxslider.css
View File

@ -88,7 +88,26 @@ ul.bxslider {
font-size: 0; font-size: 0;
line-height: 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 { .bx-wrapper .bx-prev {
left: 10px; left: 10px;
background: url('images/controls.png') no-repeat 0 -32px; background: url('images/controls.png') no-repeat 0 -32px;
@ -117,7 +136,7 @@ ul.bxslider {
} }
.bx-wrapper .bx-controls-direction a.disabled { .bx-wrapper .bx-controls-direction a.disabled {
display: none; display: none;
} }*/
/* AUTO CONTROLS (START / STOP) */ /* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto { .bx-wrapper .bx-controls-auto {
text-align: center; text-align: center;

10
myScript1.js
View File

@ -12,10 +12,9 @@ window.onload=function() {
} }
} }
$(function() { $(document).ready(function(){
$('#slider').bxSlider({ $('#slider').bxSlider({
auto: true, auto: true,
autoControls: true,
controls: true, controls: true,
infiniteLoop: true, infiniteLoop: true,
mode: 'horizontal', mode: 'horizontal',
@ -28,11 +27,16 @@ $(function() {
moveSlideQty: 1, moveSlideQty: 1,
useCSS: false, useCSS: false,
speed: 750, speed: 750,
hideControlOnEnd: true,
slideSelector: 'div.item', slideSelector: 'div.item',
minSlides: 3, minSlides: 3,
maxSlides: 3, maxSlides: 3,
moveSlides: 1, 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>'
}); });
}); });

Write Preview
Loading…
Cancel
Save