I want to hide all the contents except the center one.
Take above image as example, only "Content 1" is showing, the rest are hidden. But the images are still showing.
When click to 2nd image, "Content 2" will show instead and hide "Content 1".
I try to use jquery find "slick-center" class and remove the hidden content, but it's not working. Hoping that some of you could provide me with some advice. Thank you!
$('.slick-wrap').on('init', function(event, slick){
var dots = $( '.slick-dots li' );
dots.each( function( k, v){
$(this).find( 'button' ).addClass( 'heading'+ k );
});
var items = slick.$slides;
items.each( function( k, v){
var text = $(this).find( 'h2' ).text();
$( '.heading' + k ).text(text);
});
});
$('.slick-wrap').slick({
dots: true,
focusOnSelect: true,
infinite: true,
arrows: false,
speed: 300,
slidesToShow: 5,
slidesToScroll: 1,
centerMode: true,
centerPadding: '30px',
responsive: {
600: {
items: 2
}
}
});
if ($('.slick-item').hasClass("slick-center")){
$('div').removeClass( "cont-hide" );
}
.slick-section{
padding: 25px;
text-align: center;
}
.slick-container{
width: 100%;
margin: 0 auto;
}
.slick-wrap{
margin: 0 -10px;
}
.slick-item{
padding: 0 10px;
}
h2{
display:none;
}
.slick-dots {
list-style-type: none;
margin: 25px 0 0;
padding: 0;
}
.slick-dots li {
width: auto;
height: auto;
display: inline-block;
padding: 0 5px;
}
button{
width: auto;
height: auto;
padding: 10px;
font-size: 12px;
color: #666;
border: none;
background: #f0f0f0;
}
.slick-active button{
background: #ccc;
}
.cont-hide{
display:none;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<section class="slick-section">
<div class="slick-container">
<div class="slick-wrap">
<div class="slick-item">
<h2>Image 1</h2>
<img src="https://prestelandpartner.com/images/extras/200x200.gif" alt="">
<div class="cont-hide">Content 1</div>
</div>
<div class="slick-item">
<h2>Image 2</h2>
<img src="https://prestelandpartner.com/images/extras/200x200.gif" alt="">
<div class="cont-hide">Content 2</div>
</div>
<div class="slick-item">
<h2>Image 3</h2>
<img src="https://prestelandpartner.com/images/extras/200x200.gif" alt="">
<div class="cont-hide">Content 3</div>
</div>
<div class="slick-item">
<h2>Image 4</h2>
<img src="https://prestelandpartner.com/images/extras/200x200.gif" alt="">
<div class="cont-hide">Content 4</div>
</div>
<div class="slick-item">
<h2 class="cont-hide">Image 5</h2>
<img src="https://prestelandpartner.com/images/extras/200x200.gif" alt="">
<div class="cont-hide">Content 5</div>
</div>
<div class="slick-item">
<h2>Image 6</h2>
<img src="https://prestelandpartner.com/images/extras/200x200.gif" alt="">
<div class="cont-hide">Content 6</div>
</div>
</div>
</div>
</section>
Solved the issue by myself and here is the answer. If you have the better one, please suggest, thank you :)
//display first item
$('.slick-wrap').on('init', function(event, slick){
var carouselTexts = $(".slick-item .cont-hide");
var idx = $(event.target).find('.slick-list .slick-center').index();
carouselTexts.eq(idx).css('visibility', 'visible');
});
//remove and display clicked items
$('.slick-item').on('click', function() {
var carouselTexts = $(".slick-item .cont-hide");
var clickedNum = $(".slick-slide").index(this);
carouselTexts.not(clickedNum).css('display', 'none')
carouselTexts.eq(clickedNum).css('display', 'initial');
});
Related
This question already has answers here:
When click on <li> I when display none div and display table one div
(2 answers)
Closed 2 months ago.
Load div into target from onclick using image nav. Then I want to hide divs that are not active. The 1st div should initially load when page loads. I have searched but can't find a solution.
// JavaScript Document
const mus = document.querySelector("#mus"),
albNav = mus.querySelector(".albnav img"),
/*hideAlbNav = mus.querySelector(""),*/
tunes = mus.querySelector("#tunes"),
gen0Nav = mus.querySelector("img #gen0"),
gen1Nav = mus.querySelector("img #gen1"),
gen0Tunes = mus.querySelector("#tunes .gen0"),
gen1Tunes = mus.querySelector("#tunes .gen1");
/*$(document).on('click', '.menu', function(){
$(this).addClass('active').siblings().removeClass('active')
});*/
tunes.style.display = 'none';
$("albNav").on('click', function() {
$(this).attr('.menu');
$('tunes').hide();
$('tunes').show();
});
<div id="mus">
<div class="albnav">
<img id="gen0" class="menu" src="https://via.placeholder.com/80" alt="xxx" />
<img id="gen1" class="menu" src="https://via.placeholder.com/80" alt="xxx" />
<img id="gen2" class="menu" src="https://via.placeholder.com/80" alt="xxx" />
<img id="gen3" class="menu" src="https://via.placeholder.com/80" alt="xxx" />
<img id="gen4" class="menu" src="https://via.placeholder.com/80" alt="xxx" />
<img id="gen5" class="menu" src="https://via.placeholder.com/80" alt="xxx" />
</div>
<div id="tunes">
<div class="gen0">Gen 0</div>
<div class="gen1">Gen 1</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- <script src="js/stQ-plrnav-12-14-22.js"></script> -->
isherwood DID NOT find the solution. The author mim did. isherwood Please stop editing my post just to save face. The original answer by the author mim is as follows:
No thanks to isherwood, who has deleted his comments..haha, I found the answer from Jakob # When click on <li> I when display none div and display table one div. Here is the solution:
$('.menu').on('click',function(){
$(".hidden[show-hide="+$(this).attr('id')+"]").show();
$(".hidden[show-hide!="+$(this).attr('id')+"]").hide();
});
.albnav {
position: relative;
margin-left: auto;
margin-right: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px;
width: 80%;
/*height: auto;*/
border-style:dashed;
border-color: #F431F0;
}
.menu {
position: relative;
width: 14.75%;
object-fit: cover;
max-width: 85px;
height: auto;
vertical-align: middle;
padding: 5px 0 5px 2px;
cursor: pointer;
}
.active, .albnav img:hover {
/*background: rgba(0, 0, 0, 0.8);*/
opacity: 0.8;
}
#tunes {
/*margin-top;: 100px;*/
margin-left: auto;
margin-right: auto;
padding: 5px 20px 5px;
border-style:dashed;
border-color: #EB1215;
}
.hidden:first-of-type {display:block}
.hidden {display:none}
<div class="albnav">
<img id="gen0" class="menu" src="genpx.png"/>
<img id="gen1" class="menu" src="genpx1.png"/>
<img id="gen2" class="menu" src="genpx2.png"/>
<img id="gen3" class="menu" src="genpx3.png"/>
<img id="gen4" class="menu" src="genpx.png"/>
</div>
<div id="tunes">
<div id="tun0" class="hidden" show-hide="gen0">Gen 0</div>
<div id="tun1" class="hidden" show-hide="gen1">Gen 1</div>
<div id="tun2" class="hidden" show-hide="gen2">Gen 2</div>
<div id="tun3" class="hidden" show-hide="gen3">Gen 3</div>
<div id="tun4" class="hidden" show-hide="gen4">Gen 4</div>
</div>
I use js to load big image whent hover to list thumbnail ok. but don't work to multiple.
How to: hover .thumbs .item of boximg_01 or boximg_02 .... loading only image in boximg_1 or boximg_02 width one js function. multiple boximg_* loading img only of element.
Now when hover thumbs img of boximg_01 it run 2 big img on both boximg_01 & boximg_02
$(document).ready(function() {
$(".box-image .thumbs img").hover(function() {
var imgpath = $(this).attr("dir");
$(".box-image .image").html("<img src=" + imgpath + ">");
});
});
#image {
max-width: 348px;
margin: 0 auto;
float: left;
background: red;
}
#thumbs, .thumbs {
width: 100%;
margin: 0 auto;
display: flex;
float: left;
}
.thumbs .item {width: 100px; height: 100px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boximg_01 box-image">
<div id="image" class="image">
<a data-fancybox="gallery" href="#">
<img src="https://picsum.photos/id/1/400/400">
</a>
</div>
<div class="thumbs">
<div class="item active"><img dir="https://picsum.photos/id/1/400/400" src="https://picsum.photos/id/1/100/100"></div>
<div class="item"><img dir="https://picsum.photos/id/2/400/400" src="https://picsum.photos/id/2/100/100"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boximg_02 box-image">
<div id="image" class="image">
<a data-fancybox="gallery" href="#">
<img src="https://picsum.photos/id/3/400/400">
</a>
</div>
<div class="thumbs">
<div class="item active"><img dir="https://picsum.photos/id/3/400/400" src="https://picsum.photos/id/3/100/100"></div>
<div class="item"><img dir="https://picsum.photos/id/4/400/400" src="https://picsum.photos/id/4/100/100"></div>
</div>
</div>
Use DOM navigation relative to this to find the related image.
$(document).ready(function() {
$(".box-image .thumbs img").hover(function() {
var imgpath = $(this).attr("dir");
$(this).closest(".box-image").find(".image").html("<img src=" + imgpath + ">");
});
});
#image {
max-width: 348px;
margin: 0 auto;
float: left;
background: red;
}
#thumbs, .thumbs {
width: 100%;
margin: 0 auto;
display: flex;
float: left;
}
.thumbs .item {width: 100px; height: 100px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boximg_01 box-image">
<div id="image" class="image">
<a data-fancybox="gallery" href="#">
<img src="https://picsum.photos/id/1/400/400">
</a>
</div>
<div class="thumbs">
<div class="item active"><img dir="https://picsum.photos/id/1/400/400" src="https://picsum.photos/id/1/100/100"></div>
<div class="item"><img dir="https://picsum.photos/id/2/400/400" src="https://picsum.photos/id/2/100/100"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boximg_02 box-image">
<div id="image" class="image">
<a data-fancybox="gallery" href="#">
<img src="https://picsum.photos/id/3/400/400">
</a>
</div>
<div class="thumbs">
<div class="item active"><img dir="https://picsum.photos/id/3/400/400" src="https://picsum.photos/id/3/100/100"></div>
<div class="item"><img dir="https://picsum.photos/id/4/400/400" src="https://picsum.photos/id/4/100/100"></div>
</div>
</div>
I am using the slick.js to show a grid of 6 items (2 rows, 3 column) per slide. I need normal prev and next arrow navigation, but also wish to display the active item count as a form of pagination help.
So if on the second slide, the text should read 'Showing 7 - 12 of x results'. I can only find ways to show slide number, not item, and this text needs to update whenever the slides are navigated through.
Unless there is a slick option that I haven't found, I'd have to loop through all the items, indexing them all with numbers and find what ones have the parent class '.slick-active'. But I haven't been successful.
I'm also struggling to show the total items, as the closest thing slick seems to offer is slidecount, but that's related to the slides, not the items within.
One catch is these items won't always be a perfect multiple of 6, so the last page is likely to have less than 6 items.
Codepen attached. Many thanks!
$('.carousel').slick({
rows: 2,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: false,
arrows: true,
infinite: false,
draggable: false,
prevArrow: $('.prev'),
nextArrow: $('.next')
});
.item {
background: silver;
color: black;
text-align: center;
font-size: 30px;
display: inline;
border: 5px solid white;
}
.nav {
width: 100%;
}
.nav p{
width: 50%;
float: left;
display: block;
text-align: center;
}
.results {
text-align: center;
width: 100%;
padding-top: 10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<div class="carousel">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
</div>
<div class="nav">
<p class="prev">prev</p>
<p class="next">next</p>
</div>
<div class="results">
Showing 1 to 9 of [total] results
</div>
Here is an Demo using init and afterChange events
Note: Instead of html() use data() wherever possible
$('.carousel').on('init afterChange', function(event, slick, currentSlide){
let total = $('.carousel .item').length;
let start = $('.carousel .slick-active:first .item:first').html();
let end = $('.carousel .slick-active:last .item:last').html();
$('.results').html(`Showing ${start} to ${end} of ${total} results`)
})
$('.carousel').slick({
rows: 2,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: false,
arrows: true,
infinite: false,
draggable: false,
prevArrow: $('.prev'),
nextArrow: $('.next')
})
.item {
background: silver;
color: black;
text-align: center;
font-size: 30px;
display: inline;
border: 5px solid white;
}
.nav {
width: 100%;
}
.nav p{
width: 50%;
float: left;
display: block;
text-align: center;
}
.results {
text-align: center;
width: 100%;
padding-top: 10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<div class="carousel">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
</div>
<div class="nav">
<p class="prev">prev</p>
<p class="next">next</p>
</div>
<div class="results">
Showing 1 to 9 of [total] results
</div>
I have modified Aswin's answer to display currently active index of the visible slides, instead of reading data/html attribute.
$('.carousel').on('init afterChange', function(event, slick, currentSlide){
let total = $('.carousel .item').length;
var first = $('.slick-active:first > div:first').get(0);
var last = $('.slick-active:last > div:last').get(0);
if($(last).html() == '')
last = $('.slick-active:last > div:not(:empty)').get(0);
let start,end;
$('.slick-slide > div').each(function(i,v){
if(first === $(v).get(0)) {
start = i+1;
}
if(last === $(v).get(0)) {
end = i+1;
}
});
$('.results').html(`Showing ${start} to ${end} of ${total} results`)
})
$('.carousel').slick({
rows: 2,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: false,
arrows: true,
infinite: false,
draggable: false,
prevArrow: $('.prev'),
nextArrow: $('.next')
})
.item {
background: silver;
color: black;
text-align: center;
font-size: 30px;
display: inline;
border: 5px solid white;
}
.nav {
width: 100%;
}
.nav p{
width: 50%;
float: left;
display: block;
text-align: center;
}
.results {
text-align: center;
width: 100%;
padding-top: 10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<div class="carousel">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
</div>
<div class="nav">
<p class="prev">prev</p>
<p class="next">next</p>
</div>
<div class="results">
Showing 1 to 9 of [total] results
</div>
I need to make an owl carousel with a sidebar/vertical thumbnail section that acts as a latest news section. However, replacing the thumbnails are boxes with what the next slide is about. I also need a section for text. I have come up with the following code but I don't know what to do with it.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="owl-carousel owl-theme" id="sync1">
<div class="item">
<h1>1</h1>
</div>
<div class="item">
<h1>2</h1>
</div>
<div class="item">
<h1>3</h1>
</div>
<div class="item">
<h1>4</h1>
</div>
<div class="item">
<h1>5</h1>
</div>
<div class="item">
<h1>6</h1>
</div>
<div class="item">
<h1>7</h1>
</div>
<div class="item">
<h1>8</h1>
</div>
</div>
<div class="owl-carousel owl-theme" id="sync2">
<div class="item">
<h1>1</h1>
</div>
<div class="item">
<h1>2</h1>
</div>
<div class="item">
<h1>3</h1>
</div>
<div class="item">
<h1>4</h1>
</div>
<div class="item">
<h1>5</h1>
</div>
<div class="item">
<h1>6</h1>
</div>
<div class="item">
<h1>7</h1>
</div>
<div class="item">
<h1>8</h1>
</div>
</div>
</body>
</html>
CSS:
#sync1 {
.item {
background: #0c83e7;
padding: 80px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
}
#sync2 {
.item {
background: #C9C9C9;
padding: 10px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
cursor: pointer;
h1 {
font-size: 18px;
}
}
.current .item {
background: #0c83e7;
}
}
.owl-theme {
.owl-nav {
/*default owl-theme theme reset .disabled:hover links */
[class*='owl-'] {
transition: all .3s ease;
&.disabled:hover {
background-color: #D6D6D6;
}
}
}
}
//arrows on first carousel
#sync1.owl-theme {
position: relative;
.owl-next, .owl-prev {
width: 22px;
height: 40px;
margin-top: -20px;
position: absolute;
top: 50%;
}
.owl-prev {
left: 10px;
}
.owl-next {
right: 10px;
}
}
Javascript
$(document).ready(function() {
var sync1 = $("#sync1");
var sync2 = $("#sync2");
var slidesPerPage = 4; //globaly define number of elements per page
var syncedSecondary = true;
sync1.owlCarousel({
items: 1,
slideSpeed: 2000,
nav: true,
autoplay: true,
dots: true,
loop: true,
responsiveRefreshRate: 200,
navText: ['<svg width="100%" height="100%" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>', '<svg width="100%" height="100%" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'],
}).on('changed.owl.carousel', syncPosition);
sync2.on('initialized.owl.carousel', function() {
sync2.find(".owl-item").eq(0).addClass("current");
}).owlCarousel({
items: slidesPerPage,
dots: true,
nav: true,
smartSpeed: 200,
slideSpeed: 500,
slideBy: slidesPerPage, //alternatively you can slide by 1, this way the active slide will stick to the first item in the second carousel
responsiveRefreshRate: 100
}).on('changed.owl.carousel', syncPosition2);
function syncPosition(el) {
//if you set loop to false, you have to restore this next line
//var current = el.item.index;
//if you disable loop you have to comment this block
var count = el.item.count - 1;
var current = Math.round(el.item.index - (el.item.count / 2) - .5);
if (current < 0) {
current = count;
}
if (current > count) {
current = 0;
}
//end block
sync2.find(".owl-item").removeClass("current").eq(current).addClass("current");
var onscreen = sync2.find('.owl-item.active').length - 1;
var start = sync2.find('.owl-item.active').first().index();
var end = sync2.find('.owl-item.active').last().index();
if (current > end) {
sync2.data('owl.carousel').to(current, 100, true);
}
if (current < start) {
sync2.data('owl.carousel').to(current - onscreen, 100, true);
}
}
function syncPosition2(el) {
if (syncedSecondary) {
var number = el.item.index;
sync1.data('owl.carousel').to(number, 100, true);
}
}
sync2.on("click", ".owl-item", function(e) {
e.preventDefault();
var number = $(this).index();
sync1.data('owl.carousel').to(number, 300, true);
});
});
This is the look I am going for.
https://i.stack.imgur.com/MtBRf.png
this is solution in slick plugin:
$('.slider').slick({
slidesToShow: 7,
slidesToScroll: 1,
responsive: [
{
breakpoint: 866,
settings: {
slidesToShow: 7
}
},
{
breakpoint: 640,
settings: {
slidesToShow: 5
}
},
{
breakpoint: 320,
settings: {
slidesToShow: 3
}
}]
});
html code:
<div class="slider slider-nav">
<div class="item">
<p>1</p>
</div>
<div class="item">
<p>2</p>
</div>
<div class="item">
<p>3</p>
</div>
<div class="item">
<p>4</p>
</div>
<div class="item">
<p>5</p>
</div>
<div class="item">
<p>1</p>
</div>
<div class="item">
<p>2</p>
</div>
<div class="item">
<p>3</p>
</div>
<div class="item">
<p>4</p>
</div>
<div class="item">
<p>5</p>
</div>
</div>
After the animation of the images sliding finishes, it continues to slide right forever, I have tried a setTimeout to move the images back left so it restarts but then the setInterval animation stops.
Is there a way to move the #slidewindow left 400% so that the slide can restart from the beginning again creating an infinite loop ?
Thank You very much for all contributions!!!
HTML:
<div id="slide-box">
<div id="slidewindow">
<div id="Img1">
<img class="imgs" src="http://www.publicdomainpictures.net/pictures/170000/velka/sunrise-in-the-mountains.jpg">
</div>
<div id="Img2">
<img class="imgs" src="https://static.pexels.com/photos/402680/pexels-photo-402680.jpeg">
</div>
<div id="Img3">
<img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/8/80/Winter_landscape_in_Mauricie%2C_Qu%C3%A9bec.jpg">
</div>
<div id="Img4">
<img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/BlenderCyclesLandscape.jpg">
</div>
<div id="Img5">
<img class="imgs" src="https://static.pexels.com/photos/144244/monument-valley-lightning-storm-rain-144244.jpeg">
</div>
</div>
</div>
CSS:
#slide-box{
width: 80%;
border: solid;
border-color: white;
border-width: 1rem;
background-color: yellow;
display: inline-block;
overflow: hidden;
}
#slidewindow{
float: left;
width: 500%;
margin: 0;
position: relative;
}
.imgs{
width: 20%;
float: left;
margin: 0 0 0 0;
}
JQUERY:
setInterval(function(){
$('#slidewindow').animate({
right:'+=100%',
}, 1000);
}, 2000);
If you restore the animated right property after the animation, and then move the first image to the end of the list, you get an ever ongoing slide show:
setInterval(function(){
$('#slidewindow').animate({
right:'+=100%',
}, 1000, function () { // Add this callback function
// Reinject the first image at the end, and set "right" back to 0
$('#slidewindow').append($('#slidewindow>div:first')).css({ right: 0 });
});
}, 2000);
#slide-box{
width: 80%;
border: solid;
border-color: white;
border-width: 1rem;
background-color: yellow;
display: inline-block;
overflow: hidden;
}
#slidewindow{
float: left;
width: 500%;
margin: 0;
position: relative;
}
.imgs{
width: 20%;
float: left;
margin: 0 0 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide-box">
<div id="slidewindow">
<div id="Img1">
<img class="imgs" src="http://www.publicdomainpictures.net/pictures/170000/velka/sunrise-in-the-mountains.jpg">
</div>
<div id="Img2">
<img class="imgs" src="https://static.pexels.com/photos/402680/pexels-photo-402680.jpeg">
</div>
<div id="Img3">
<img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/8/80/Winter_landscape_in_Mauricie%2C_Qu%C3%A9bec.jpg">
</div>
<div id="Img4">
<img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/BlenderCyclesLandscape.jpg">
</div>
<div id="Img5">
<img class="imgs" src="https://static.pexels.com/photos/144244/monument-valley-lightning-storm-rain-144244.jpeg">
</div>
</div>
</div>
Here is my version, its a more generic, please try to use this in your code!
var right = 0;
setInterval(function() {
//determine the right position minus the width of one image.
right = parseInt($('#slidewindow').css("right")) + $('.imgs').width();
//check if the right position has reach the end, i.e width of the slidewindow
if (right === $('#slidewindow').width()) {
//if the end is reached you can use the below line to directly send it to the first image.
//$('#slidewindow').css("right", "0px");
//or
//if you want to animate the return to the first line, use the below JS
$('#slidewindow').animate({
right: '0'
}, 1000);
} else {
//since we have not reached the end of the width, increase the slide
$('#slidewindow').animate({
right: '+=100%'
}, 1000);
}
//on each interval, add the width of the slide that was moved to the right variable!
right += parseInt($('#slidewindow').css("right"));
}, 2000);
#slide-box {
width: 80%;
border: solid;
border-color: white;
border-width: 1rem;
background-color: yellow;
display: inline-block;
overflow: hidden;
}
#slidewindow {
float: left;
width: 500%;
margin: 0;
position: relative;
}
.imgs {
width: 20%;
float: left;
margin: 0 0 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide-box">
<div id="slidewindow">
<div id="Img1">
<img class="imgs" src="http://www.publicdomainpictures.net/pictures/170000/velka/sunrise-in-the-mountains.jpg">
</div>
<div id="Img2">
<img class="imgs" src="https://static.pexels.com/photos/402680/pexels-photo-402680.jpeg">
</div>
<div id="Img3">
<img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/8/80/Winter_landscape_in_Mauricie%2C_Qu%C3%A9bec.jpg">
</div>
<div id="Img4">
<img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/BlenderCyclesLandscape.jpg">
</div>
<div id="Img5">
<img class="imgs" src="https://static.pexels.com/photos/144244/monument-valley-lightning-storm-rain-144244.jpeg">
</div>
</div>
</div>
You could use a global counter...
var counter = 0;
setInterval(function(){
if(counter == 3)
{
$('#slidewindow').animate({
right:'-=300%',
}, 1000);
counter = 0;
}
else
{
$('#slidewindow').animate({
right:'+=100%',
}, 1000);
counter++;
}
}, 2000);
#slide-box{
width: 80%;
border: solid;
border-color: white;
border-width: 1rem;
background-color: yellow;
display: inline-block;
overflow: hidden;
}
#slidewindow{
float: left;
width: 500%;
margin: 0;
position: relative;
}
.imgs{
width: 20%;
float: left;
margin: 0 0 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide-box">
<div id="slidewindow">
<div id="Img1">
<img class="imgs" src="http://www.publicdomainpictures.net/pictures/170000/velka/sunrise-in-the-mountains.jpg">
</div>
<div id="Img2">
<img class="imgs" src="https://static.pexels.com/photos/402680/pexels-photo-402680.jpeg">
</div>
<div id="Img3">
<img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/8/80/Winter_landscape_in_Mauricie%2C_Qu%C3%A9bec.jpg">
</div>
<div id="Img4">
<img class="imgs" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/BlenderCyclesLandscape.jpg">
</div>
<div id="Img5">
<img class="imgs" src="https://static.pexels.com/photos/144244/monument-valley-lightning-storm-rain-144244.jpeg">
</div>
</div>
</div>