As you can see in my previous question, I've managed to get a slideshow working.
I wanted to put on more slideshows, unfortunately they don't work although I think I've used the same code/design.
And the original slideshow is also not working anymore :(. I got stationary slide shows now.
Can anybody see what I should do in order to get all slideshows working again?
Here's the code:
HTML
`
<!-- Featured ad 1 -->
<div id="SlideshowFeaturedAd1">
<div>
<img src="Img4.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img5.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img6.jpg" height="150px" width="75px">
</div>
</div>
<!-- Featured ad 2 -->
<div id="SlideshowFeaturedAd2">
<div>
<img src="Img7.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img8.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img9.jpg" height="150px" width="75px">
</div>
</div>
<!-- Featured ad 3 -->
<div id="SlideshowFeaturedAd3">
<div>
<img src="Img10.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img11.jpg" height="150px" width="75px">
</div>
<div>
<img src="Img12.jpg" height="150px" width="75px">
</div>
</div>`
CSS
/* General settings */
body {
font-family: helvetica;
}
* {
font-size: 100%;
font-family: helvetica;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Starring ads */
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#SlideshowStarringAds {
margin: 80px auto;
position: absolute;
top: 20%;
left: 25%;
width: 350px;
height: 350px;
padding: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}
#SlideshowStarringAds {
height: 300px;
width: 300px;
}
#SlideshowStarringAds > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
/* Featured ad 1 */
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#SlideshowFeaturedAd1 {
margin: 80px auto;
position: absolute;
top: 20%;
right: 25%;
width: 150px;
height: 75px;
padding: 10px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
}
#SlideshowFeaturedAd1 {
height: 75px;
width: 150px;
}
#SlideshowFeaturedAd1 > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
/* Featured ad 2 */
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#SlideshowFeaturedAd2 {
margin: 80px auto;
position: absolute;
top: 34%;
right: 39%;
width: 150px;
height: 75px;
padding: 10px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
}
#SlideshowFeaturedAd2 {
height: 75px;
width: 150px;
}
#SlideshowFeaturedAd2 > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
/* Featured ad 3 */
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#SlideshowFeaturedAd3 {
margin: 80px auto;
position: absolute;
top: 48%;
right: 25%;
width: 150px;
height: 75px;
padding: 10px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
}
#SlideshowFeaturedAd3 {
height: 75px;
width: 150px;
}
#SlideshowFeaturedAd3 > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
Javascript in HTML head
<!-- Code Javascript belonging to starring ads -->
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
<!-- End of Java script -->
Javascript file
Downloadable from OneDrive
Well, in your javascript, you can add:
var slideshow1 = document.getElementById("SlideshowFeaturedAd1");
slideshow1.currentSlideIndex = 1;
showSlides(slideshow1.currentSlideIndex, slideshow1);
var slideshow2 = document.getElementById("SlideshowFeaturedAd2");
slideshow2.currentSlideIndex = 1;
showSlides(slideshow2.currentSlideIndex, slideshow2);
var slideshow2 = document.getElementById("SlideshowFeaturedAd3");
slideshow2.currentSlideIndex = 1;
showSlides(slideshow2.currentSlideIndex, slideshow2);
function plusSlides(n, slideshow) {
showSlides(slideshow.currentSlideIndex += n, slideshow);
}
function currentSlide(n, slideshow) {
showSlides(slideshow.currentSlideIndex = n, slideshow);
}
function showSlides(n, slideshow) {
var i;
var slides = slideshow.getElementsByClassName("mySlides");
var dots = slideshow.getElementsByClassName("dot");
if (n > slides.length) {slideshow.currentSlideIndex = 1}
if (n < 1) {slideshow.currentSlideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideshow.currentSlideIndex-1].style.display = "block";
dots[slideshow.currentSlideIndex-1].className += " active";
}
Then in your CSS, you can add:
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
.mySlides {display:none}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
Finally in your HTML, you can add:
<!-- Featured ad 1 -->
<div id="SlideshowFeaturedAd1">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img4.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img5.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img6.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<a class="prev" onclick="plusSlides(-1,slideshow1)">❮</a>
<a class="next" onclick="plusSlides(1, slideshow1)">❯</a>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1, slideshow1)"></span>
<span class="dot" onclick="currentSlide(2, slideshow1)"></span>
<span class="dot" onclick="currentSlide(3, slideshow1)"></span>
</div>
</div>
<br>
<!-- Featured ad 2 -->
<div id="SlideshowFeaturedAd2">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img7.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img8.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img9.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<a class="prev" onclick="plusSlides(-1,slideshow1)">❮</a>
<a class="next" onclick="plusSlides(1, slideshow1)">❯</a>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1, slideshow1)"></span>
<span class="dot" onclick="currentSlide(2, slideshow1)"></span>
<span class="dot" onclick="currentSlide(3, slideshow1)"></span>
</div>
</div>
<br>
<!-- Featured ad 3 -->
<div id="SlideshowFeaturedAd3">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img10.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img11.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="Img12.jpg" style="height: 150px; width: 75px;">
<div class="text">Caption Text</div>
</div>
<a class="prev" onclick="plusSlides(-1,slideshow1)">❮</a>
<a class="next" onclick="plusSlides(1, slideshow1)">❯</a>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1, slideshow1)"></span>
<span class="dot" onclick="currentSlide(2, slideshow1)"></span>
<span class="dot" onclick="currentSlide(3, slideshow1)"></span>
</div>
</div>
<br>
Also, this question is similar to:
How do I make multiple slideshows in the same html document?
Since, that question has an answer to this question.
Related
I'm trying to animate a stack of cards. I borrowed some code off of the web that was a three-card stack and everything worked fine, but I'd like to add more cards to the stack. The jQuery is using 'first' 'next' and 'last' which I think is limiting it to 3x cards.
If you click 'next step' a few times in the codepen here you can see that it works for cards 1 and 2, but then when it moves to card 3 the final card also moves: https://codepen.io/chrisjcastle93/pen/rNMJNLr
What I'm trying to achieve is for the left and right margin on the 3rd card to be 0 when Step 3 is active (with 4 maintaining its margin) and then the 4th (and final card) to do the same when that card is selected.
HTML
<div id="section2play">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12">
<div class="inner-container">
<div class="card inactive-1" style="height: 8px; margin-left: 30px; margin-right: 30px;"></div>
<div class="card inactive-2" style="height: 8px; margin-left: 20px; margin-right: 20px;"></div>
<div class="card inactive-3" style="height: 8px; margin-left: 10px; margin-right: 10px;"></div>
<div class="card">
<div class="content active" style="opacity: 1; right: 10%;">
<h1>Step 1</h1>
<p>Make perfectly hot homemade coffee. Carefully pour into coffee cup. <i class="em em-coffee"></i></p>
<a class="button" href="#">Next step →</a>
</div>
<div class="content">
<h1>Step 2</h1>
<p>Trip. Spill all over the place.</p>
<a class="button" href="#">Next step →</a>
</div>
<div class="content">
<h1>Step 3</h1>
<p>Repeat.</p>
<a class="button" href="#">Next step →</a>
</div>
<div class="content">
<h1>Step 4</h1>
<p>Repeat.</p>
<a class="button" href="#">Next step →</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
#section2play body {
height: 100vh;
width: 100%;
margin: 0;
}
#section2play .container {
margin: 4em auto;
}
#section2play .inner-container {
position: relative;
max-width: 100%;
min-width: 360px;
height: 300px;
width: 100%;
margin: 0 auto 100px;
}
#section2play .content {
position: absolute;
opacity: 0;
top: 2em;
left: 10%;
width: 80%;
margin: 0 auto;
}
#section2play .active {
display: block !important;
margin: 0 auto;
opacity: 1;
transition: ease-in-out 1s;
}
#section2play .card {
position: relative;
background-color: #e5eef2;
padding-bottom: 10px;
box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
border-radius: 40px;
border-radius: 5px;
padding: 2em 0;
height: 300px;
box-sizing: border-box;
transition: .3s ease;
/* box-shadow: 0 3px 10px -2px rgba(0,0,0,0.35); */
}
#section2play a {
position: relative;
&:before {
content: '';
position: absolute;
bottom: 2px;
left: 0;
width: 0%;
border-bottom: 2px solid $aqua;
transition: 0.3s;
}
&:hover:before {
width: 80%;
}
}
JS
$("#section2play").ready(function() {
var content = $('.content');
var currentItem = content.filter('.active');
var inactive1 = $('.inactive-1');
var inactive2 = $('.inactive-2');
var inactive3 = $('.inactive-3');
$('.button').click(function() {
currentItem.removeClass('active');
if (currentItem.is(content.last())) {
currentItem = content.first().addClass('active');
currentItem.css({'right': '10%', 'opacity': '1'});
inactive1.animate({height: '8px', marginLeft:'30px', marginRight:'30px'}, 100);
inactive2.animate({height: '8px', marginLeft:'20px', marginRight:'20px'}, 100);
inactive3.animate({height: '8px', marginLeft:'10px', marginRight:'10px'}, 100);
} else if (currentItem.is(content.first())) {
currentItem.animate({opacity: 0}, 1000);
currentItem = currentItem.next().addClass('active');
inactive3.animate({height: '0', marginLeft:'0px', marginRight:'0px'}, 100);
} else {
currentItem = currentItem.next().addClass('active');
inactive1.animate({height: '0', marginLeft:'0px', marginRight:'0px'}, 100);
inactive2.animate({height: '0', marginLeft:'0px', marginRight:'0px'}, 100);
inactive3.animate({height: '0', marginLeft:'0px', marginRight:'0px'}, 100);
}
});
An issue has been created when min-width:768px the image and text content alignment break down!
Basically, I want to keep image and text at a time, one after another in mobile layout, and one image and related text should be aligned horizontally one after another in tablet layout, but its breakdown! The desktop layout is Okay !
Here is the code
.sq-about-main {
margin-bottom: 80px;
}
.s-about-col-areas {
display: block;
margin: 10% auto;
overflow: hidden;
}
.s-about-col-areas:after {
content: "";
clear: both;
display: block;
}
.s-about-col {
width: 100%;
float: left;
position: relative;
padding-bottom: 100%;
}
#media (min-width: 768px) {
.s-about-col {
width: calc(100% / 2);
padding-bottom: calc(100% / 2);
}
}
#media (min-width: 1200px) {
.s-about-col {
width: calc(100% / 4);
float: left;
position: relative;
padding-bottom: calc(100% / 4);
}
}
.s-about-col .s-about-col-content {
width: calc(100%);
height: calc(100%);
/*margin: 8px;*/
/*padding: 16px;*/
position: absolute;
border-radius: 2px;
background-color: #ffffff;
/*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);*/
}
.image-col .s-about-col-content img {
width: 100%;
height: 100%;
object-fit: cover;
-o-object-fit: cover;
}
.s-about-col-content i {
position: absolute;
left: 45px;
bottom: 45px;
font-size: 20px;
line-height: 20px;
color: #646464;
border: 1px solid #646464;
padding: 10px;
cursor: pointer;
}
.text-col {
display: table;
}
.text-col .text-col-content {
padding: 30% 45px 45px 45px;
height: 100%;
display: table-cell;
text-align: left;
vertical-align: middle;
}
.text-col .text-col-content h2 {
font-family: "Helvetica-Bold", sans-serif;
}
.text-col .text-col-content p {
font-family: "Roboto", sans-serif;
font-size: 20px;
color: #656565;
}
.text-col .text-col-content.l-arrow::before {
content: "";
position: absolute;
top: 50%;
left: -25px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-right: 25px solid #ffffff;
z-index: 2;
}
.text-col .text-col-content.r-arrow::before {
content: "";
position: absolute;
top: 50%;
right: -25px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #ffffff;
z-index: 2;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="sq-about-main">
<div class="container-fluid px-5-percent">
<div class="s-about-col-areas">
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img src="https://i.imgur.com/3U2Fd7P.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content l-arrow">
<h2>Who We are</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img src="https://i.imgur.com/jXTai9N.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content l-arrow">
<h2>Mission & Vision</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
<div class="s-about-col-areas">
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content r-arrow">
<h2>Philosophy</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img class="" src="https://i.imgur.com/pZdZJvq.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content r-arrow">
<h2>Achievements</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img class="m-0" src="https://i.imgur.com/tJVEprD.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
I would rethink the structure, since your 8 boxes are basically 4 boxes with 2 parts in each of them. Then you can control the sequence with float left/right, like this:
.sq-about-main {
margin-bottom: 80px;
}
.s-about-col-areas {
display: block;
margin: 10% auto;
overflow: hidden;
}
.s-about-col-areas:after {
content: "";
clear: both;
display: block;
}
.s-about-col {
width: 100%;
position: relative;
padding-bottom: 100%;
}
.floatleft .s-about-col {
float:left;
}
.floatright .s-about-col {
float:right;
}
#media (min-width: 768px) {
.s-about-col {
width: calc(100% / 2);
padding-bottom: calc(100% / 2);
}
}
#media (min-width: 1200px) {
.s-about-col {
width: calc(100% / 4);
float: left;
position: relative;
padding-bottom: calc(100% / 4);
}
}
.s-about-col .s-about-col-content {
width: calc(100%);
height: calc(100%);
/*margin: 8px;*/
/*padding: 16px;*/
position: absolute;
border-radius: 2px;
background-color: #ffffff;
/*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);*/
}
.image-col .s-about-col-content img {
width: 100%;
height: 100%;
object-fit: cover;
-o-object-fit: cover;
}
.s-about-col-content i {
position: absolute;
left: 45px;
bottom: 45px;
font-size: 20px;
line-height: 20px;
color: #646464;
border: 1px solid #646464;
padding: 10px;
cursor: pointer;
}
.text-col {
display: table;
}
.text-col .text-col-content {
padding: 30% 45px 45px 45px;
height: 100%;
display: table-cell;
text-align: left;
vertical-align: middle;
}
.text-col .text-col-content h2 {
font-family: "Helvetica-Bold", sans-serif;
}
.text-col .text-col-content p {
font-family: "Roboto", sans-serif;
font-size: 20px;
color: #656565;
}
.text-col .text-col-content.l-arrow::before {
content: "";
position: absolute;
top: 50%;
left: -25px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-right: 25px solid #ffffff;
z-index: 2;
}
.text-col .text-col-content.r-arrow::before {
content: "";
position: absolute;
top: 50%;
right: -25px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #ffffff;
z-index: 2;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="sq-about-main">
<div class="container-fluid px-5-percent">
<div class="s-about-col-areas">
<div class="element floatleft">
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img src="https://i.imgur.com/3U2Fd7P.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content l-arrow">
<h2>Who We are</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
<div class="element floatleft">
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img src="https://i.imgur.com/jXTai9N.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content l-arrow">
<h2>Mission & Vision</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
</div>
<div class="s-about-col-areas">
<div class="element floatright">
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img class="" src="https://i.imgur.com/pZdZJvq.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content r-arrow">
<h2>Philosophy</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
<div class="element floatright">
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img class="m-0" src="https://i.imgur.com/tJVEprD.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content r-arrow">
<h2>Achievements</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
</div>
</div>
</div>
Please put this code in your CSS.
#media (max-width: 767px) {
.s-about-col{padding-bottom: 0;}
.s-about-col .s-about-col-content{position: relative;}
}
I created this code for a slider. When I hover the thumbnail image it shows me image, but I need to create an automatic slider. How can i do this?
/******************************************************************************************************/
.sliderconteainer {
width: 100%;
position: relative;
border: 2px double silver;
border-radius: 5px;
}
.thmbnail {
width: 25%;
height: 100px;
float: left;
}
.slide {
width: 100%;
height: 300px;
position: absolute;
float: right;
left: 0;
top: 0;
opacity: 0;
}
.slide img {
height: 300px;
width: 100%;
}
.thmbnail img {
width: 100%;
height: 95%;
border: 2px solid #EEEEEE;
border-radius: 5px;
}
.content-placeholder {
width: 100%;
height: 300px;
}
.info {
background-color: black;
z-index: 99;
margin-top: -66px;
position: absolute;
width: 100%;
padding-right: 10px;
opacity: .75;
border-radius: 5px;
}
.info p {
color: #ABB3BD;
font-family: 'B Mitra';
}
.info h5 {
font-family: 'B Titr';
color: #ffffff;
}
.thmbnail:hover .slide {
opacity: 1;
}
.thmbnail:hover .thmbnail img {
border: 2px solid #56656E;
}
#main {
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
<div class=" sliderconteainer col-md-5 col-sm-5">
<div class="content-placeholder"></div>
<div class="thmbnail">
<div class="slide">
<img src="~/Image/SiteDesign/profile.jpg" class="img-responsive"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/SiteDesign/profile.jpg"/>
</div>
<div class="thmbnail">
<div class="slide">
<img src="~/Image/Slider/8.jpg"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/Slider/8.jpg"/>
</div>
<div class="thmbnail">
<div class="slide">
<img src="~/Image/Slider/image-slider-2.jpg"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/Slider/image-slider-2.jpg"/>
</div>
<div class="thmbnail ">
<div class="slide">
<img src="~/Image/Slider/Megumi-4565.jpg"/>
<div class="info">
<h5>عنوان برای اسلید اول</h5>
<p>توضیحالت اسلاید دوم</p>
</div>
</div>
<img src="~/Image/Slider/Megumi-4565.jpg"/>
</div>
</div>
</div>
If you want to change things automatically, you can use the build-in JavaScript function setInterval(xfunction, xInterval), which calls xFunction, every xInterval
setInterval(function() {
console.log("MOVE IT");
moveLeft();
}, 1000);
As #dennis-koch mentioned, I would also have a look at plugins you may use for a slider.
I created a new webpage that has a slide show container with 6 sides. Right now I can manually click the next/previous buttons and view next/previous slides, but I need to know how I can play them automatically with a new slide shnowing every 3 seconds.
Here is my script:
function plusSlides(n)
{
showSlides(slideIndex += n);
}
function currentSlide(n)
{
showSlides(slideIndex = n);
}
function showSlides(n)
{
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++)
{
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
.slideshow-container {
position: relative;
max-width: 90%;
margin: auto;
animation: 30s slidy infinite;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 25px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: white;
font-size: 25px;
padding: 8px 12px;
position: absolute;
bottom: 18px;
width: 100%;
text-align: center;
}
.textwbg {
color: Black;
font-size: 25px;
padding: 8px 12px;
position: absolute;
bottom: 18px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 25px;
padding: 8px 12px;
position: absolute;
top: 2;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #66b8ff;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #555;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 2s;
animation-name: fade;
animation-duration: 3s;
}
.nextbutton {
position: relative;
}
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 6</div>
<img src="gal/a1.jpg" style="width:100%">
<div class="text">Our Mission</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 6</div>
<img src="gal/a2.jpg" style="width:100%">
<div class="textwbg">Our Doctor Pannel</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 6</div>
<img src="gal/a3.jpg" style="width:100%">
<div class="textwbg">Make an Appointment</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 6</div>
<img src="gal/a4.jpg" style="width:100%">
<div class="text">Friendly Environment</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 6</div>
<img src="gal/a5.jpg" style="width:100%">
<div class="textwbg">24/7</div>
</div>
<div class="mySlides fade">
<div class="numbertext">6 / 6</div>
<img src="gal/a6.jpg" style="width:100%">
<div class="textwbg">Facilities</div>
</div>
<a class="prev" onclick="plusSlides(-1)">O</a>
<a class="next" onclick="plusSlides(1)">O</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
<span class="dot" onclick="currentSlide(6)"></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
you can use setInterval function to achieve this
Here is the updated code which is working fine. I used setInterval to make it work and the slideIndex will reset to one once it reaches the end.
var slideIndex = 1;
window.onload = function() {
showSlides(slideIndex);
setInterval(function() {
showSlides(slideIndex);
slideIndex++;
}, 3000);
}
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
.slideshow-container {
position: relative;
max-width: 90%;
margin: auto;
animation: 30s slidy infinite;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 25px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.text {
color: white;
font-size: 25px;
padding: 8px 12px;
position: absolute;
bottom: 18px;
width: 100%;
text-align: center;
}
.textwbg {
color: Black;
font-size: 25px;
padding: 8px 12px;
position: absolute;
bottom: 18px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 25px;
padding: 8px 12px;
position: absolute;
top: 2;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #66b8ff;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #555;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 2s;
animation-name: fade;
animation-duration: 3s;
}
.nextbutton {
position: relative;
}
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 6</div>
<img src="gal/a1.jpg" style="width:100%">
<div class="text">Our Mission</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 6</div>
<img src="gal/a2.jpg" style="width:100%">
<div class="textwbg">Our Doctor Pannel</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 6</div>
<img src="gal/a3.jpg" style="width:100%">
<div class="textwbg">Make an Appointment</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 6</div>
<img src="gal/a4.jpg" style="width:100%">
<div class="text">Friendly Environment</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 6</div>
<img src="gal/a5.jpg" style="width:100%">
<div class="textwbg">24/7</div>
</div>
<div class="mySlides fade">
<div class="numbertext">6 / 6</div>
<img src="gal/a6.jpg" style="width:100%">
<div class="textwbg">Facilities</div>
</div>
<a class="prev" onclick="plusSlides(-1)">O</a>
<a class="next" onclick="plusSlides(1)">O</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
<span class="dot" onclick="currentSlide(6)"></span>
</div>
The code that does the automatic execution is setInterval. If you need to clarify the difference between setInterval and setTimeout check this answer
var slideIndex = 0;
showSlides();
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
slides[slideIndex - 1].style.display = "block";
setInterval(showSlides, 3000); // Here is the magic!, change the slide every 3 seconds
}
.slideshow-container {
position: relative;
max-width: 90%;
margin: auto;
animation: 30s slidy infinite;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 25px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.text {
color: white;
font-size: 25px;
padding: 8px 12px;
position: absolute;
bottom: 18px;
width: 100%;
text-align: center;
}
.textwbg {
color: Black;
font-size: 25px;
padding: 8px 12px;
position: absolute;
bottom: 18px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 25px;
padding: 8px 12px;
position: absolute;
top: 2;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #66b8ff;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #555;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 2s;
animation-name: fade;
animation-duration: 3s;
}
.nextbutton {
position: relative;
}
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 6</div>
<img src="gal/a1.jpg" style="width:100%">
<div class="text">Our Mission</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 6</div>
<img src="gal/a2.jpg" style="width:100%">
<div class="textwbg">Our Doctor Pannel</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 6</div>
<img src="gal/a3.jpg" style="width:100%">
<div class="textwbg">Make an Appointment</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 6</div>
<img src="gal/a4.jpg" style="width:100%">
<div class="text">Friendly Environment</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 6</div>
<img src="gal/a5.jpg" style="width:100%">
<div class="textwbg">24/7</div>
</div>
<div class="mySlides fade">
<div class="numbertext">6 / 6</div>
<img src="gal/a6.jpg" style="width:100%">
<div class="textwbg">Facilities</div>
</div>
<a class="prev" onclick="plusSlides(-1)">O</a>
<a class="next" onclick="plusSlides(1)">O</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
<span class="dot" onclick="currentSlide(6)"></span>
</div>
I am currently using bxslider in my web page, but how can i change the next prev to font awesome icon? is it possible? Which code should i change? Thanks.
Below is my html and js code.
HTML:
<div class = "container-fluid">
<div id="slider1">
<div class="">
<div class="panel panel-default">
<div class="ribbon ribbon-pt-acc">Account</div>
<img src="../../images/game/assassin.jpg" class="panel-img img-responsive">
<div class="panel-body">
<div class="offer-title"><h5 class="text-danger">Player of the Month: Messi</h5></div>
<div class="offer-desc text-muted small">
FIFA 15
<br />
Xbox ONE
</div>
<h4 class="txt-1line"><b>RM 103.90</b></h4>
</div>
</div>
</div>
<div class="">
<div class="panel panel-default">
<div class="ribbon ribbon-pt-acc">Currency</div>
<img src="../../images/game/ff-tactics.jpg" class="panel-img img-responsive">
<div class="panel-body">
<div class="offer-title"><h5 class="text-danger">5,000 GOLD</h5></div>
<div class="offer-desc text-muted small">
1 Gold = RM 0.70
<br />
Aegwynn - Alliance
</div>
<h4 class="txt-1line"><b>RM 23.90</b></h4>
</div>
</div>
</div>
<div class="">
<div class="panel panel-default">
<div class="ribbon ribbon-pt-acc">Item</div>
<img src="../../images/game/harvest-moon.jpg" class="panel-img img-responsive">
<div class="panel-body">
<div class="offer-title"><h5 class="text-danger">Legendary Weapon's Raw Materia</h5></div>
<div class="offer-desc text-muted small">
Guild Wars 2
<br />
All Servers
</div>
<h4 class="txt-1line"><b>RM 486.50</b></h4>
</div>
</div>
</div>
<div class="">
<div class="panel panel-default">
<div class="ribbon ribbon-pt-acc">Boosting</div>
<img src="../../images/game/hero.jpg" class="panel-img img-responsive">
<div class="panel-body">
<div class="offer-title"><h5 class="text-danger">10,000 GOLD</h5></div>
<div class="offer-desc text-muted small">
1 Gold = RM 0.007
<br />
Aefwynn - Alliance
</div>
<h4 class="txt-1line"><b>RM 48.50</b></h4>
</div>
</div>
</div>
<div class="">
<div class="panel panel-default">
<div class="ribbon ribbon-pt-acc">Card</div>
<img src="../../images/game/lol.jpg" class="panel-img img-responsive">
<div class="panel-body">
<div class="offer-title"><h5 class="text-danger">Legendary Weapon's Raw Materia</h5></div>
<div class="offer-desc text-muted small">
World of Warcraft
<br />
Firetree - Horde
</div>
<h4 class="txt-1line"><b>RM 263.10</b></h4>
</div>
</div>
</div>
<div class="">
<div class="panel panel-default">
<div class="ribbon ribbon-pt-acc">Currency</div>
<img src="../../images/game/reckoning.jpg" class="panel-img img-responsive">
<div class="panel-body">
<div class="offer-title"><h5 class="text-danger">Something os Something Epicness</h5></div>
<div class="offer-desc text-muted small">
Guild Wars 2
<br />
All Servers
</div>
<h4 class="txt-1line"><b>RM 82.50</b></h4>
</div>
</div>
</div>
<div class="">
<div class="panel panel-default">
<div class="ribbon ribbon-pt-acc">Account</div>
<img src="../../images/game/sanguo.jpg" class="panel-img img-responsive">
<div class="panel-body">
<div class="offer-title"><h5 class="text-danger">Player of the Month: Messi</h5></div>
<div class="offer-desc text-muted small">
FIFA 15
<br />
Xbox ONE
</div>
<h4 class="txt-1line"><b>RM 103.90</b></h4>
</div>
</div>
</div>
</div>
</div>
Here are bxslider Javascript:
/** RESET AND LAYOUT
===================================*/
.bx-wrapper {
position: relative;
margin: 0 auto 60px;
padding: 0;
*zoom: 1;
}
.bx-wrapper img {
max-width: 100%;
display: block;
}
/** THEME
===================================*/
.bx-wrapper .bx-viewport {
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
border: 5px solid #fff;
left: -5px;
background: #fff;
/*fix other elements on the page moving (on Chrome)*/
-webkit-transform: translatez(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
transform: translatez(0);
}
.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 #fff;
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-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: inline-block;
*zoom: 1;
*display: inline;
}
.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 {
background: #000;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
left: 10px;
background: url(images/controls.png) no-repeat 0 -32px;
}
.bx-wrapper .bx-next {
right: 10px;
background: url(images/controls.png) no-repeat -43px -32px;
}
.bx-wrapper .bx-prev:hover {
background-position: 0 0;
}
.bx-wrapper .bx-next:hover {
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 {
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 {
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\9;
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;
}
Just try to add fa - icons as below:
$('.bxslider').bxSlider({
nextText: '<i class="fa fa-angle-right"></i>',
prevText: '<i class="fa fa-angle-left"></i>'
});
For other options check this solution here
If you add the font-awesome icons as nextText & prevText, remove the text-indent property from the css of bxSlider. The selector is .bx-wrapper .bx-controls-direction a. This rule makes sense when using the standard values, but if you use the *text-properties to add icons, as in our case, the indentation hides the icons outside of the viewport.