Image Slider Problem
actually i am a beginner in jquery.My aim is to create a brilliant image slider.I already create image slider using jquery from lot of tutorials.
code part
slider.js
$(document).ready(function(){
$(".slider li:first-child").addClass("active");
setTimeout(autoAddClass, 5000);
$('.next').click(function() {
nextslide();
});
$('.previous').click(function() {
previousslide();
});
});
function nextslide()
{
$('.slider li:first-child').hide('slide', {direction: 'left'}, 1000);
//$('.slider li:first-child').fadeOut().next().fadeIn().end().appendTo('.slider');
}
function previousslide(){
$('.slider li:first-child').fadeOut();
$('.slider li:last-child').prependTo('.slider').fadeOut();
$('.slider li:first-child').fadeIn();
setTimeout(autoAddClass, 5000);
}
function autoAddClass(){
var next = $(".active").removeClass("active").next();
if(next.length)
$(next).addClass('active');
else
$('.slider li:first-child').addClass('active');
setTimeout(autoAddClass, 5000);
}
*{
margin: 0;
padding: 0;
}
.full_width{
/*display: inline-block;*/
display: block;
width: 100%;
}
.full_width.language_header{
height: 50px;
background-color:#000;
/*margin-bottom: -5px;*/
}
.full_width.slider_header{
height: 600px;
background-color:#fff;
/*margin-bottom: -5px;*/
overflow: hidden;
}
.main_content{
/*display: inline-block;*/
display: block;
width:100%;
float:left;
}
.wrapper{
margin: 0 auto;
max-width: 1125px;
width: 100%;
}
.main_slider{
width: 100%;
float: left;
}
.active{
display: block;
}
ul{
list-style: none;
}
li{
display: block;
display: none;
}
.previous{
color: #000;
}
.next{
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="full_width slider_header">
<div class="wrapper">
<div class="main_content">
<div class="main_slider">
Previous
Next
<ul class="slider">
<li><img height="100%" width="100%" alt="#Welcome" src="img/pic1.jpg"></li>
<li><img height="100%" width="100%" alt="#Welcome" src="img/pic3.jpg"></li>
<li><img height="100%" width="100%" alt="#Welcome" src="img/pic2.jpg"></li>
<li><img height="100%" width="100%" alt="#Welcome" src="img/pic4.jpg"></li>
<li><img height="100%" width="100%" alt="#Welcome" src="img/pic5.jpg"></li>
</ul>
</div>
The problem is when i click the next pervious button(from screen shot) the 1st image will move on to right and the second one is load. i the current it doesn't happen please help.
So here is an example of what you can do.
I simplified you html. You don't need that many classes for a Jquery slider.
Simply what i did is this:
This is where all the magic happens:
.slider img {
transition: left 1s;
}
This makes it flow from the left to the right.
Left can only be used with position and is also set.
.slider img {
position: absolute;
}
The animation happens when we set the css propert in Jquery:
$active.css('left', wid);
Dont get confused by the wid its just a measurement: var wid = $active.width();
Now with previous button!
last edit: Its now a slidable div with a heading you can edit the div hover you would like.
$(".slider .slide:first-child").addClass("active");
//setInterval(nextslide, 5000);
$('.next').click(function () {
nextslide();
});
$('.previous').click(function () {
previousslide();
});
function nextslide() {
var $active = $('.slider .active');
var wid = $active.width();
$active.css('left', wid);
var $next;
if ($active.next().length != 0)
$next = $active.next();
else
$next = $('.slider .slide').first()
$next.addClass("next")
setTimeout(function () {
$next.addClass('active');
$next.removeClass("next");
$active.removeClass('active');
$active.css('left', 0);
}, 1000);
}
function previousslide() {
var $active = $('.slider .active');
var $previous;
if ($active.prev().length != 0) {
$previous = $active.prev();
} else
$previous = $('.slider .slide').last();
var wid = $previous.width();
$previous.css('left', wid);
setTimeout(function () {
$active.removeClass("active");
$active.addClass("previous");
$previous.addClass('active');
$previous.css('left', 0);
}, 1000);
setTimeout(function () {
$active.removeClass("previous");
}, 2000);
}
* {
margin: 0;
padding: 0;
}
.slider .slide {
transition: left 1s;
position: absolute;
height: 100%;
width: 100%;
left: 0;
background-color: white;
}
.slide img {
max-width: 100%;
}
.slider .next {
z-index: 98;
}
.slider .previous {
z-index: 98;
}
.slider .active {
z-index: 99;
}
.slider {
position: relative;
height: 400px;
width: 400px;
overflow: hidden;
border: solid black 2px;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<div class="btn-group">
<button class="previous">previus</button>
<button class="next">Next</button>
</div>
<div class="slider">
<div class="slide">
<h4>Now with text and kittens!</h4>
<img src="https://www.math.ku.edu/~wsanders/Kittens/new%20kittens/Cute-little-kittens-550x365.jpg" />
</div>
<div class="slide">
<h4>I hope this helps you out</h4>
<img src="http://maxcdn.thedesigninspiration.com/wp-content/uploads/2012/08/Cuddling-Kittens-002.jpg" />
</div>
<div class="slide">
<h4>Its not so hard to modify the code. You should really try it yourself.</h4>
<img src="https://tyrannyoftradition.files.wordpress.com/2012/05/cutest-kitten-hat-ever-13727-1238540322-17.jpg" />
</div>
</div>
</main>
Related
When click on the small image it will open as pop-up for 15 seconds, and then automatically opens the second one.
Is it possible to add certain time limit of pop-up image and after that the next image will open? closely same with Whatsapp or Facebook status.
Here is my HTML, CSS and JavaScript code:
$(function () {
"use strict";
$(".popup img").click(function () {
var $src = $(this).attr("src");
$(".show").fadeIn();
$(".img-show img").attr("src", $src);
});
$("span, .overlay").click(function () {
$(".show").fadeOut();
});
});
.popup{
width: 900px;
margin: auto;
text-align: center
}
.popup img{
width: 200px;
height: 200px;
cursor: pointer
}
.show{
z-index: 999;
display: none;
}
.show .overlay{
width: 100%;
height: 100%;
background: rgba(0,0,0,.66);
position: absolute;
top: 0;
left: 0;
}
.show .img-show{
width: 600px;
height: 400px;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
overflow: hidden
}
.img-show span{
position: absolute;
top: 10px;
right: 10px;
z-index: 99;
cursor: pointer;
}
.img-show img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
/*End style*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popup">
<img src="http://images.entertainment.ie/images_content/rectangle/620x372/success-kid.jpg">
<img src="https://pbs.twimg.com/media/CX1PAZwVAAANemW.jpg">
<img src="http://images5.fanpop.com/image/photos/30900000/beautiful-pic-different-beautiful-pictures-30958249-1600-1200.jpg">
</div>
<div class="show">
<div class="overlay"></div>
<div class="img-show">
<span>X</span>
<img src="">
</div>
</div>
<!--End image popup-->
Thank you.
window.onload = function() {
setTimeout(function() {
document.getElementById('mydiv').style.display = 'block';
}, 10000);
}
You can use this code but I guess you can easily find more examples for this on google.
$(function() {
"use strict";
var timeOut;
var intervalMs = 15000;
$(".popup img").click(function() {
var src = $(this).attr("src");
$(".show").fadeIn();
$(".img-show img").attr("src", src);
if (timeOut != null)
clearTimeout(timeOut);
var that = $(this);
timeOut = setTimeout(function() {
if (that.next() == null)
that.siblings().first().click();
else
that.next().click();
}, intervalMs);
});
$("span, .overlay").click(function() {
clearTimeout(timeOut);
$(".show").fadeOut();
});
});
So I've created my image slider and it is set to slide when one of the buttons is clicked. But now I'm struggling to make the slide automatically and stop when the mouse hovers over the sider. Could you show me or at least tell me how to do this? Thanks
$(document).ready(function(){
var slide_count = $(".carousel li").length;
var slide_width = $(".carousel li").width();
var slide_height = $(".carousel li").height();
var cont_width = slide_width * slide_count;
$(".cont").css({ height: slide_height, width: slide_width});
$(".carousel").css({ width: cont_width, marginLeft: - slide_width });
$(".carousel li:last-child").prependTo(".carousel");
function next_slide(){
$(".carousel").animate({
left: + slide_width
}, 400, function(){
$(".carousel li:last-child").prependTo(".carousel");
$('.carousel').css('left', 0);
}
);
}
function prev_slide(){
$(".carousel").animate({
left: - slide_width
}, 400, function(){
$(".carousel li:first-child").appendTo(".carousel");
$(".carousel").css("left", 0);
}
);
}
$("#next").click(function(){
next_slide();
});
$("#prev").click(function(){
prev_slide();
});
});
*{
padding: 0;
margin: 0;
}
body{
margin: 0;
padding: 0;
}
.cont{
position: relative;
text-align: center;
font-size: 0;/*removes white space*/
margin: 60px auto 0 auto;
padding: 0;
overflow: hidden;
}
.carousel{
position: relative;
margin: 0;
padding: 0;
list-style-type: none;
height: 100%;
max-height: 600px;
}
.carousel li{
float: left;
width: 750px;
height: 350px;
}
.carousel li img{
width: 100%;
height: auto;
}
#next{
position: absolute;
top: 45%;
right: 0;
width: 40px;
height: 40px;
background-color: blue;
font-size: 0;
z-index: 1;
}
#prev{
position: absolute;
top: 45%;
left: 0;
width: 40px;
height: 40px;
background-color: blue;
z-index: 1;
}
<div class="cont">
<div id="next">
</div>
<div id="prev">
</div>
<ul class="carousel">
<li>
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-2.jpg" alt="" />
</li>
<li>
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-6.jpg" alt="" />
</li>
<li>
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-1.jpg" alt="" />
</li>
<li>
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-3.jpg" alt="" />
</li>
</ul>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
You can achieve that by creating a setInterval() where you call your slider function every x seconds, and put a flag on it to not run if the mouse is over it.
Something like
var SECONDS_INTERVAL = 1000; // 1s
var mouseHoverFlag = false;
setInterval(function() {
if (!mouseHoverFlag) {
next_slide();
}
}, SECONDS_INTERVAL);
And change that mouseHoverFlag to true whenever the user has the mouse over the div that contains it.
$('.carousel').hover(function() {
mouseHoverFlag = true;
}, function () {
mouseHoverFlag = false;
});
You could use setTimeout and kill it every time that the mouse gets in but I think that's too heavy, performance wise.
Here is my edited version. We have to use setInterval function for automatic slide. Next we add hover event listener to carousel. If we are hovering, our variable preventSlide will change to true and if we stop hovering, variable will be changed back to false, which means auto slide.
var preventSlide = false;
$(".carousel").hover(function() {
preventSlide = true;
}, function() {
preventSlide = false;
});
setInterval(function () {
if (!preventSlide)
next_slide();
}, 3500);
$(document).ready(function(){
var slide_count = $(".carousel li").length;
var slide_width = $(".carousel li").width();
var slide_height = $(".carousel li").height();
var cont_width = slide_width * slide_count;
$(".cont").css({ height: slide_height, width: slide_width});
$(".carousel").css({ width: cont_width, marginLeft: - slide_width });
$(".carousel li:last-child").prependTo(".carousel");
function next_slide(){
$(".carousel").animate({
left: + slide_width
}, 400, function(){
$(".carousel li:last-child").prependTo(".carousel");
$('.carousel').css('left', 0);
}
);
}
function prev_slide(){
$(".carousel").animate({
left: - slide_width
}, 400, function(){
$(".carousel li:first-child").appendTo(".carousel");
$(".carousel").css("left", 0);
}
);
}
var preventSlide = false;
$(".carousel").hover(function() {
preventSlide = true;
}, function() {
preventSlide = false;
});
setInterval(function () {
if (!preventSlide)
next_slide();
}, 3500);
/*$("#next").click(function(){
next_slide();
});
$("#prev").click(function(){
prev_slide();
});*/
});
*{
padding: 0;
margin: 0;
}
body{
margin: 0;
padding: 0;
}
.cont{
position: relative;
text-align: center;
font-size: 0;/*removes white space*/
margin: 60px auto 0 auto;
padding: 0;
overflow: hidden;
}
.carousel{
position: relative;
margin: 0;
padding: 0;
list-style-type: none;
height: 100%;
max-height: 600px;
}
.carousel li{
float: left;
width: 750px;
height: 350px;
}
.carousel li img{
width: 100%;
height: auto;
}
#next{
position: absolute;
top: 45%;
right: 0;
width: 40px;
height: 40px;
background-color: blue;
font-size: 0;
z-index: 1;
}
#prev{
position: absolute;
top: 45%;
left: 0;
width: 40px;
height: 40px;
background-color: blue;
z-index: 1;
}
<div class="cont">
<div id="next">
</div>
<div id="prev">
</div>
<ul class="carousel">
<li>
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-2.jpg" alt="" />
</li>
<li>
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-6.jpg" alt="" />
</li>
<li>
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-1.jpg" alt="" />
</li>
<li>
<img src="http://lorempixel.com/output/abstract-q-c-1500-700-3.jpg" alt="" />
</li>
</ul>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
You should add a setInterval and clearInterval for automatic slide. Also it is good to calculate which slide you are in at the current animation. Briefly,
var timer;
var rotator = function(){
nextSlide();
};
timer = setInterval(rotator, 5000); // your desired timer
$('.carousel').hover(function(){ clearInterval(timer), function(){ timer = setInterval(rotator, 5000); });
you can optimize the code far better, but the basic solution is like this.
$(function(){
setInterval(function () {
moveRight();
}, 3000);
});
check here
You can set the time interval as an option in the carousel. You can also set the pause option on hover.
$("#myCarousel").carousel({interval: 500, pause: "hover"});
I have a CSS slider that works for the most part except for two things I cannot figure out. The first being, how to get my slider navigation buttons to work the way I am after. Right now, if you click on one, my addClass adds .active to all of the buttons instead of only the one clicked on. Along with that I cannot figure out how to associate the slider position with the navigation menu. What I mean is if the user does not click any of the buttons I still want the buttons to show which slide is active.
MY second issue is whenever the buttons are clicked it stops the slide show.
What am I doing wrong in my attempts?
Off-topic, but would it be difficult to transition what I have now to fade in the slides rather than sliding them?
$('.control-button').click(function() {
button = $(this).attr('id');
id = button.replace('slide', '');
pos = (id - 1) * 100;
$('div#slider figure').css('animation-play-state', 'paused');
$('div#slider figure').removeClass('figure2');
$('.control-button').addClass('active');
posStr = '-' + pos + '%';
$('.figure').css('left', posStr);
});
$('img').click(function() {
$('div#inner').css('left', '0px');
$('div#slider figure').addClass('figure2');
$('div#slider figure').css('animation-play-state', 'running');
})
div#slider {
width: 100%;
overflow: hidden;
}
div#slider .figure {
position: relative;
width: 400%;
margin: 0;
padding: 0;
font-size: 0;
text-align: left;
/*animation: 20s company-slider infinite;*/
}
.figure2 {
animation: 20s company-slider infinite;
}
#keyframes company-slider {
0% {
left: 0%;
}
30% {
left: 0%;
}
35% {
left: -100%;
}
55% {
left: -100%;
}
60% {
left: -200%;
}
90% {
left: -200%;
}
95% {
left: -300%;
}
100% {
left: -300%;
}
}
div#slider figure img {
width: 25%;
min-height: 100%;
float: left;
}
/*div#slider figure:hover { animation-play-state:paused; }*/
div#slider li {
list-style: none;
}
div#slider label {
background-color: #111;
bottom: .5em;
cursor: pointer;
display: block;
height: .5em;
position: absolute;
width: .5em;
z-index: 10;
}
#controls {
width: 100%;
height: auto;
}
#control-container {
padding: 25px 12%;
}
.control-button {
display: inline;
margin: 0 2%;
width: 25%;
background: gray;
height: 10px;
border: none;
}
.control-button.active {
display: inline;
margin: 0 2%;
width: 25%;
background: black;
height: 10px;
border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="slider">
<figure class="figure figure2">
<img src="https://iso.500px.com/wp-content/uploads/2016/02/stock-photo-139669245.jpg" alt>
<img src="http://i.cbc.ca/1.3376224.1450794847!/fileImage/httpImage/image.jpg_gen/derivatives/4x3_620/tundra-tea-toss.jpg" alt>
<img src="https://static.pexels.com/photos/22804/pexels-photo.jpg" alt>
<img src="https://iso.500px.com/wp-content/uploads/2016/02/stock-photo-139669245.jpg" alt>
</figure>
<div id="controls">
<div id="control-container">
<button id="slide1" class="control-button"></button>
<button id="slide2" class="control-button"></button>
<button id="slide3" class="control-button"></button>
</div>
</div>
</div>
This makes all of the buttons active:
$('.control-button').addClass('active');
Replace it with:
$('.control-button').removeClass('active');
$(event.target).addClass('active');
Add the event parameter to the function so you can use event.target:
$('.control-button').click(function(event) {
EDIT:
Making the control buttons activate "naturally" as the images slide is a bit harder.
Make each image have an attribute that says which slide it is:
<figure class="figure figure2">
<img data-number="slide1" src="https://iso.500px.com/wp-content/uploads/2016/02/stock-photo-139669245.jpg" alt>
<img data-number="slide2" src="http://i.cbc.ca/1.3376224.1450794847!/fileImage/httpImage/image.jpg_gen/derivatives/4x3_620/tundra-tea-toss.jpg" alt>
<img data-number="slide3" src="https://static.pexels.com/photos/22804/pexels-photo.jpg" alt>
<img data-number="slide4" src="https://iso.500px.com/wp-content/uploads/2016/02/stock-photo-139669245.jpg" alt>
</figure>
Create a system to detect when the image comes into view:
window.setInterval(function() {
Detect which image is being shown:
var activeImage = document.elementFromPoint($(window).width()/2, 10); // The image at the horizontal midpoint of the screen
Set the class of the corresponding control button to active:
$('.control-button').removeClass('active');
$("#"+$(activeImage).attr("data-number")).addClass('active'); // Sets whichever control button that corresponds to the image under the horizontal midpoint of the screen as active
Set how often you want to check at the closing of the setInterval:
}, /*time interval in miliseconds*/);
As far as adding 'active' to all buttons you should replace this:
$('.control-button').addClass('active');
with this:
$('.control-button').removeClass('active'); //this removes all '.active' first
$(this).addClass('active');
What's happening here is that within the .control-button click function, $(this) represents the current .control-button element.
https://jsfiddle.net/q3j01xrs/
What about this? I improved your script. I took out your CSS animation and replaced it by another JavaScript animation. Have a look!
$('.control-button').click(function() {
clearInterval(setInt);
$('.control-button').removeClass('active');
$(this).addClass('active');
var getIndex = $(this).index('.control-button');
$('.figure img').hide();
$('.figure img').eq(getIndex).show();
setInt = setInterval(slide, 5000);
});
function slide() {
var getIndex = $('.figure img:visible').index('.figure img');
$('.control-button').removeClass('active');
$('.figure img:visible').animate({
width: 'toggle'
}, 350);
getIndex++;
if ((getIndex) == $('.control-button').length) {
$('.control-button').eq(0).addClass('active');
$('.figure img').eq(0).animate({
width: 'toggle'
}, 350);
} else {
$('.control-button').eq(getIndex).addClass('active');
$('.figure img').eq(getIndex).animate({
width: 'toggle'
}, 350);
}
};
var setInt = setInterval(slide, 5000);
I was wondering could any one help me with my rolling banner. the problem i am having is that when it loads up on the screen it only moves threw one pic. the code i am using is measured to fit across the top of my page just over the nav bar.
$(function () {
//settings for slider
var width = 1165;
var animationSpeed = 2000;
var pause = 1000;
var currentSlide = 1;
//cache DOM elements
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var $slides = $('.slide', $slider);
var interval;
function startSlider() {
interval = setInterval(function () {
$slideContainer.animate({
'margin-left': '-=' + width
}, animationSpeed, function () {
if (++currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function pauseSlider() {
clearInterval(interval);
}
$slideContainer.on('mouseenter', pauseSlider)
.on('mouseleave', startSlider);
startSlider();
});
#slider {
width: 1165px;
height: 100px;
overflow: hidden;
}
#slider .slides {
display: block;
width: 1165px;
height: 100px;
margin: 0;
padding: 0;
}
#slider .slide {
float: left;
list-style-type: none;
width: 1165px;
height: 100px;
}
.slide1 {
background: red;
}
.slide2 {
background: blue;
}
.slide3 {
background: green;
}
.slide4 {
background: purple;
}
.slide5 {
background: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Container">
<div id="slider">
<ul class="slides">
<li class="slide slide1">slide1</li>
<li class="slide slide2">slide2</li>
<li class="slide slide3">slide3</li>
<li class="slide slide4">slide4</li>
<li class="slide slide5">slide5</li>
<li class="slide slide1">slide1</li>
</ul>
</div>
</div>
i think my problem is with my measurements i don't fully understand it, to know what to change???? the pictures i am using are width 2192px * height 220px, that might explain were i am getting my measurements
Your code is fine I think. The actual problem is that your li elements are stacked vertically, because they are all floated and floats line-wrap when they get too big for their parent.
Instead of floating them all, you can try using display: inline-block; on each .slide, and white-space: nowrap; on the .slides
Here is an example, the only changes from your original are CSS:
$(function () {
//settings for slider
var width = 1165;
var animationSpeed = 2000;
var pause = 1000;
var currentSlide = 1;
//cache DOM elements
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var $slides = $('.slide', $slider);
var interval;
function startSlider() {
interval = setInterval(function () {
$slideContainer.animate({
'margin-left': '-=' + width
}, animationSpeed, function () {
if (++currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function pauseSlider() {
clearInterval(interval);
}
$slideContainer.on('mouseenter', pauseSlider)
.on('mouseleave', startSlider);
startSlider();
});
#slider {
width: 1165px;
height: 100px;
overflow: hidden;
}
#slider .slides {
display: block;
width: 1165px;
height: 100px;
margin: 0;
padding: 0;
white-space: nowrap;
font-size: 0em;
}
#slider .slide {
list-style-type: none;
width: 1165px;
height: 100px;
display: inline-block;
font-size: 1rem;
}
.slide1 {
background: red;
}
.slide2 {
background: blue;
}
.slide3 {
background: green;
}
.slide4 {
background: purple;
}
.slide5 {
background: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Container">
<div id="slider">
<ul class="slides">
<li class="slide slide1">slide1</li>
<li class="slide slide2">slide2</li>
<li class="slide slide3">slide3</li>
<li class="slide slide4">slide4</li>
<li class="slide slide5">slide5</li>
<li class="slide slide1">slide1</li>
</ul>
</div>
</div>
I've been messing around with my slider and I got it to slide by itself. The problem is, there is no way you can manually view the slides. I would like to add navigation dots on the bottom so you can skim through the slides without having to view them as the slider goes along. If you could help me with this it would be greatly appreciated.
My slider html:
<div id="slider-container">
<div style="position: relative">
<div class="slide"><img id="slide_1" src="images/slide_1.jpg"/></div>
<div class="slide"><img id="slide_2" src="images/slide_2.jpg"/></div>
<div class="slide"><img id="slide_3" src="images/slide_3.jpg"/></div>
<div class="slide"><img id="slide_4" src="images/slide_4.jpg"/></div>
<div class="slide"><img id="slide_5" src="images/slide_5.jpg"/></div>
<div class="slide"><img id="slide_6" src="images/slide_6.jpg"/></div>
</div>
</div>
My slider css:
.slide-container {
display:block;
}
.slide {
top:0;
width:760px;
height:420px;
display:block;
position:absolute;
transform:scale(0);
transition:all .7s;
}
.slide img {
width:100%;
height:100%;
border-radius:6px;
border:1px solid #95ca1a;
}
My slider javascript:
$(document).ready(function() {
(function (){
var count = $(".slide > img").length;
var current = 1;
var sliderNext = 2;
$("img[id^='slide_']").fadeOut(0);
$("#slide_" + current).fadeIn(300);
var loop = setInterval(function() {
$("#slide_" + current).fadeOut(300);
$("#slide_" + sliderNext).fadeIn(300);
(sliderNext >= count) ? sliderNext = 1 : sliderNext++;
(current >= count) ? current = 1 : current++;
}, 3000)
})()
});
Here's an example of what I mean by nav dots:
CSS Slider - Codepen
First create list of dots, you can do it manually by creating list of "li" tags or can create it via jQuery.
here is code
<ol>
<li></li>
<li></li>
<li></li>
</ol>
number of "li" element should match with number of images
then have following css
#slider-container {
position:relative;
overflow:hidden;
width:100%;
height:380px;
display:inline-block;
}
.slide {
top:0;
width:100%;
display:inline-block;
}
.slide img {
width:100%;
height:100%;
border-radius:6px;
border:1px solid #95ca1a;
}
/******* css of dots ****/
ol{
list-style= none;
width:100%;
}
ol li{
background: #888;
border-radius: 50%;
display: inline-block;
width:20px;
height:20px;
cursor: pointer;
}
then add following jQuery stuff
$('ol li').bind('click', function(){
var index = $(this).index() + 1;
$(".active").fadeOut(300);
$("#slide_" + index).fadeIn(300);
$(".slide").removeClass("active");
$("#slide_" + index).addClass("active");
});
this code will hide active image and shows selected image
here is Fiddle example
hope it will help you
Here is a carousel script I wrote for a project. This allows you to click forward and backward and also on the dots. It's also dynamic so if you have 1 image, there are no dots or scroll bars, if you have 2 images there are the bars to go right and left but no dots, once you have three or more images the dots will be applied.
JsFiddle
HTML
<div class="carousel-container">
<div class="left-arrow"></div>
<div class="right-arrow"></div>
<div class="carousel-image-holder">
<img src="http://digitaljournal.com/img/8/7/8/4/4/i/1/1/7/o/ulingan_kids.jpg" />
<img src="http://freethoughtblogs.com/taslima/files/2012/06/22-funny2.jpg" />
<img src="http://blog.metrotrends.org/wp-content/uploads/2013/09/childPoverty.jpg" />
<img src="http://www.chinadaily.com.cn/china/images/2010WenUN/attachement/jpg/site1/20100921/0013729ece6b0e01d9691a.jpg" />
</div>
</div>
<div class="clear"></div>
<div class="carousel-buttons-container">
<ul></ul>
</div>
CSS
.clear{clear:both;}
.carousel-container{
width: 600px;
height: 360px;
float: left;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
}
.right-arrow{
width: 60px;
height: 100%;
background-color: rgba(0,0,0,.5);
position: absolute;
right: 0;
margin: 0;
padding: 0;
z-index: 2;
}
.left-arrow{
width: 60px;
height: 100%;
background-color: rgba(0,0,0,.5);
position: absolute;
left: 0;
margin: 0;
padding: 0;
z-index: 2;
}
.carousel-image-holder{
height:360px;
width: 2400px;
margin: 0;
padding: 0;
position: absolute;
z-index: 1;
}
.carousel-image-holder img{
width: 600px;
float: left;
margin: 0;
padding: 0;
display: inline-block;
}
.carousel-buttons-container{
width: 600px;
text-align: center;
margin: 15px 0 0 0;
padding: 0;
}
.carousel-buttons-container ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.carousel-buttons{
background-color: #dddddd;
height: 18px;
width: 18px;
border-radius: 50%;
display: inline-block;
margin: 0 10px 0 0;
padding: 0;
cursor: pointer;
}
.carousel-buttons:last-of-type{
margin: 0;
}
.active{
background-color: #e67e22;
}
JQUERY
$(".left-arrow").hide();
var numImgs = $('div.carousel-image-holder img').length;
var addId = numImgs;
if(numImgs == 2){
var clicked = 0;
imgCount = numImgs-2;
}else if(numImgs <= 1){
$(".right-arrow").hide();
}else{
var clicked = 1;
imgCount = numImgs-1;
}
if(numImgs > 2){
for (var i=0; i<numImgs; i++){
$("ul").prepend('<li class="carousel-buttons" id="carousel'+addId+'"></li>');
var addId = addId - 1;
}
}else{
}
$(".carousel-buttons").click(function(){
var findIdClicked = $(this).attr("id");
var splitString = findIdClicked.split("carousel")
var findTheNumb = splitString[1];
$(".carousel-buttons").removeClass("active");
$(this).addClass("active");
clicked = parseInt(findTheNumb);
var adjustNumberforSlide = findTheNumb-1;
$(".carousel-image-holder").animate({"left": -(600*adjustNumberforSlide)+"px"});
console.log(clicked);
if(findTheNumb == 1){
$(".left-arrow").hide();
$(".right-arrow").show();
}else if (findTheNumb == numImgs){
$(".right-arrow").hide();
$(".left-arrow").show();
}else{
$(".right-arrow").show();
$(".left-arrow").show();
}
});
$(".carousel-buttons-container").find("li").first().addClass("active");
$(".right-arrow").click(function(){
if (clicked < imgCount){
$(".carousel-image-holder").animate({"left": "-=600px"});
console.log(clicked);
}else{
$(".carousel-image-holder").animate({"left": "-=600px"});
$(".right-arrow").hide();
console.log(clicked);
}
clicked = clicked+1;
$(".left-arrow").show();
$(".carousel-buttons").removeClass("active");
$("#carousel"+clicked).addClass("active");
});
$(".left-arrow").click(function(){
if (clicked > 2){
$(".carousel-image-holder").animate({"left": "+=600px"});
console.log(clicked);
}else{
$(".carousel-image-holder").animate({"left": "+=600px"});
$(".left-arrow").hide();
console.log(clicked);
}
$(".right-arrow").show();
clicked = clicked-1;
$(".carousel-buttons").removeClass("active");
$("#carousel"+clicked).addClass("active");
});
I'll clean up the spacing, just wanted to get this posted