Hi guys, this is Zack. Firstly I do not know whether this is the right place to ask for help. The rest of the categories restricts me to a specific course but this is outside of the courses.
Here is my index.html (home page) SLIDESHOW PORTION:
<!doctype html>
<html>
<body>
<!-- SLIDESHOW STARTS HERE -->
<div class="cycle-slideshow"
data-cycle-fx="fade"
data-cycle-timeout=3000
data-cycle-center-horz=true
data-cycle-center-vert=true
data-cycle-pager="#pager"
data-cycle-pager-template="<a href='#'><img src='{{src}}' height=50 width=75/>"
data-cycle-next="#next"
data-cycle-prev="#prev"
data-cycle-manual-fx="scrollHorz"
data-cycle-manual-speed="400"
data-cycle-pager-fx="fade"
>
<img src="images/portraits/ALEX-WILSON1.jpg" width="1514" height="1011" alt="Alex Wilson by JBP"/>
<img src="images/portraits/Leah Toyne 31571583 Picture2.jpg" width="1488" height="829" alt="Leah Toyne by JBP"/>
<img src="images/buildings/Xanthe-Cohen_.jpg" width="1824" height="1202" alt="Xanthe Cohen by JBP"/>
<img src="images/landscape/Emily-Heron.jpg" width="1184" height="730" alt=""/>
<img src="images/street/Ainlsey-Rodgers-05.jpg" width="2888" height="1925" alt=""/>
<img src="images/buildings/IMGP3588.jpg" width="3008" height="2008" alt=""/>
<img src="images/landscape/James-Richards-30492613-BUNKER-SUN-RAYS.jpg" width="1877" height="1253" alt=""/>
<img src="images/street/Rayelene Chin 1.JPG" width="1024" height="683" alt=""/>
<img src="images/street/Chin-Yin-Pic_1.jpg" width="2288" height="1520" alt=""/>
<img src="images/street/Christoph Noehring 2.JPG" width="1024" height="683" alt=""/>
<img src="images/street/171643585_8e0d637bfb_b.jpg" width="1024" height="514" alt=""/>
<img src="images/landscape/Naveed-Farro3.jpg" width="1616" height="1077" alt=""/>
<img src="images/landscape/Aditi_Goenka_.jpg" width="1680" height="1120" alt=""/>
<img src="images/landscape/David-Delaney_3.jpg" width="1232" height="798" alt=""/>
<img src="images/buildings/IMGP3477.jpg" width="3008" height="2008" alt=""/>
<img src="images/buildings/James-Richards_10_IMG_4131.jpg" width="2033" height="1152" alt=""/>
<img src="images/buildings/Xanthe Cohen_ (2).jpg" width="3872" height="2592" alt=""/>
<img src="images/portraits/Katie EC Cochrane2.jpg" width="1352" height="900" alt=""/>
<img src="images/portraits/ALEX 07_DAD.png" width="1504" height="1067" alt=""/>
<img src="images/portraits/Jerri-Lee-Matthews---Fairy.jpg" width="2008" height="1335" alt=""/>
<img src="images/portraits/Joel-Crane_03_AltFemBnW-5687.jpg" width="2672" height="1775" alt=""/>
</div><!-- SLIDESHOW ENDS HERE -->
<div id="pager">
</div>
<img id="prev" src="images/slideshow/prev1.svg"/>
<img id="next" src="images/slideshow/next1.svg"/>
<!-- pager ENDS HERE -->
</body>
</html>
Here is my CSS document. I have installed 3 jquery plugins for the slideshow but I think the problem is with my coding.
/* CSS Document */
.cycle-slideshow {
width:100%;
max-width: 960px;
max-height: 600px;
display:block;
position:relative;
margin: 20px auto;
overflow:hidden;
}
.cycle-slideshow img {
width:100%;
height:auto;
}
#pager {
text-align:center;
height: 70px;
width: 100%;
position: relative;
bottom: 5%;
background: rgba(0,0,0,.5);
z-index: 1000;
opacity: 1;
transition: all 0.3s ease-in-out 0s;
}
#pager:hover {
opacity:1;
}
#pager img {
margin: 10px 5px;
opacity: 0.3;
transition: all 0.3s ease-in-out 0s;
}
#pager img:hover {
opacity:1;
transform:scale(1.05);
z-index:100;
}
#prev {
height: 60px;
width: 60px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto 10px;
z-index:100;
}
#next {
height: 60px;
width: 60px;
position:absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto 10px;
z-index:100;
}
As you can see, the images is more one line. That is, the extra images will overflow to the next line which is not what I want. I am hoping to find out how to place all the images on the pager and when the user hovers on the pager, the images on the pager will scroll automatically.
Thanks in advanced,
Zack.