Stop image blinking on image slideshow - javascript

I'm creating an image slideshow, however, I have come across a problem.Every time I click to move the slideshow the next image blinks.How do I avoid this I would like it to just slide in smoothly.
Here is my code:
jQuery(document).ready(function($) {
$('#checkbox').change(function() {
setInterval(function() {
moveRight();
}, 3000);
});
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var sliderUlWidth = slideCount * slideWidth;
$('#slider').css({
width: parseInt(slideWidth) * 3 +"px",
});
$('#slider ul').css({
width: sliderUlWidth
});
$('#slider ul li:last-child').prependTo('#slider ul');
function moveLeft() {
$('#slider ul').animate({
left: +slideWidth
}, 200, function() {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};
function moveRight() {
$('#slider ul').animate({
left: -slideWidth
}, 200, function() {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
};
$('a.control_prev').click(function() {
moveLeft();
});
$('a.control_next').click(function() {
moveRight();
});
});
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
html {
border-top: 5px solid #fff;
color: #2a2a2a;
}
html,
body {
margin: 0;
padding: 0;
font-family: 'Open Sans';
}
h1 {
color: #fff;
text-align: center;
font-weight: 300;
}
#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
}
#slider ul {
position: relative;
margin: 0;
padding: 0;
height: auto;
list-style: none;
}
#slider ul li img{
max-width:100%;
line-height: 0;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 33.33%;
height: auto;
background: #ccc;
text-align: center;
line-height: 0;
}
a.control_prev,
a.control_next {
position: absolute;
z-index: 999;
padding: 0% 0%;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.1;
cursor: pointer;
top: 0;
display: block;
width: 33.33%;
height: 100%;
}
a.control_prev:hover,
a.control_next:hover {
-webkit-transition: all 0.2s ease;
}
a.control_prev {}
a.control_next {
right: 0;
}
.slider_option {
position: relative;
margin: 10px auto;
width: 160px;
font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Very Simple Slider</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1> </h1>
<div id="slider">
<ul>
<li><img src="https://orig00.deviantart.net/e3bb/f/2012/155/0/c/naruto_unleashed_by_sketch_gfx-d529cho.png"></li>
<li><img src="https://assets.rbl.ms/6450955/980x.jpg"></li>
<li><img src="http://tampascene.com/images/new-images/parks-weedonisland.jpg"></li>
</ul>
</div>
<div class="slider_option"> </div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
I am not sure how to do this if you have any guides or pointers it would be great And if this question needs improving it wouldn't hurt just trying to tell me instead of just downvoting I am only 13 years and still learning Thank You in advance.


You can fade in the image by changing all the prependTo and appendTo statements thusly:
$('#slider ul li:last-child').prependTo('#slider ul');
becomes
$('#slider ul li:last-child').hide().prependTo('#slider ul').fadeIn(500);
Here's a jsfiddle containing the updated code. You can change the number in fadeIn(x) to however many x milliseconds you like.

Related

How to autoplay or loop slider images

help me to autoplay image in jquery slider ?
i watch this tutorial and try to make an image slider , for the customization i need loop this images
youtube url of slider - https://www.youtube.com/watch?v=J2HLW4A40X8&t=5s
code is given below
<!DOCTYPE html>
<html>
<head>
<title>JQSlider</title>
<style> basic styling <>
</head>
<body>
<div class="right_img">
<div class="slider-outer">
<button class="prev">
<img src="images/leftarrow.png" alt="">
</button>
<div class="slider-inner">
<img src="images/Rectangle - Copy.png" class="active">
<img src="images/Rectangle1.png">
<img src="images/Rectangle2.png">
<img src="images/Rectangle.png">
</div>
<button class="next">
<img src="images/rightarrow.png" alt="">
</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(document).ready(function(){
$('.next').on('click', function(){
var currentImg = $('.active');
var nextImg = currentImg.next();
if(nextImg.length){
currentImg.removeClass('active').css('z-index', -10);
nextImg.addClass('active').css('z-index', 10);
}
});
$('.prev').on('click', function(){
var currentImg = $('.active');
var prevImg = currentImg.prev();
if(prevImg.length){
currentImg.removeClass('active').css('z-index', -10);
prevImg.addClass('active').css('z-index', 10);
}
});
});
</script>
</body>
</html>

jQuery(document).ready(function ($) {
setInterval(function () {
moveRight();
}, 3000);
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#slider').css({ width: slideWidth, height: slideHeight });
$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider ul li:last-child').prependTo('#slider ul');
function moveLeft() {
$('#slider ul').animate({
left: + slideWidth
}, 200, function () {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};
function moveRight() {
$('#slider ul').animate({
left: - slideWidth
}, 200, function () {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
};
$('a.control_prev').click(function () {
moveLeft();
});
$('a.control_next').click(function () {
moveRight();
});
});
html {
border-top: 5px solid #fff;
background: #58DDAF;
color: #2a2a2a;
}
html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans';
}
h1 {
color: #fff;
text-align: center;
font-weight: 300;
}
#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
}
#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 200px;
list-style: none;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 500px;
height: 300px;
background: #ccc;
text-align: center;
line-height: 300px;
}
a.control_prev, a.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
}
a.control_prev:hover, a.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}
a.control_prev {
border-radius: 0 2px 2px 0;
}
a.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}
.slider_option {
position: relative;
margin: 10px auto;
width: 160px;
font-size: 18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>AutoPlay Slider</h1>
<div id="slider">
>
<
<ul>
<li>SLIDE 1</li>
<li style="background: #aaa;">SLIDE 2</li>
<li>SLIDE 3</li>
<li style="background: #aaa;">SLIDE 4</li>
</ul>
</div>

jQuery - how to jump to a specific slide when clicking a nav bullet?

I have a slider made with jQuery which is working how I want it to. I have also added nav bullets, but how do I get them working so the user can jump to every slide?
Do I have to change the position of each slide everytime or is there a better, easier solution for it?
https://codepen.io/Insane415/pen/dRVmzx
jQuery(document).ready(function ($) {
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
var bullets = [$(".bullets a:first-child"), $(".bullets a:nth-of-type(2)"), $(".bullets a:nth-of-type(3)"), $(".bullets a:last-child")];
var sliderPos = 1;
setInterval(function () {
moveRight();
}, 3000);
$('#slider').css({ width: slideWidth, height: slideHeight });
$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider ul li:last-child').prependTo('#slider ul');
function moveLeft() {
$('#slider ul').animate({
left: + slideWidth
}, 200, function () {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};
function moveRight() {
$('#slider ul').animate({
left: - slideWidth
}, 200, function () {
if(sliderPos == 0){bullets[3].removeClass("active-bullet");}
if(sliderPos != 0){bullets[sliderPos - 1].removeClass("active-bullet")}
bullets[sliderPos].addClass("active-bullet");
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
sliderPos++;
if(sliderPos == 4){sliderPos = 0;}
});
};
});
<div class="container">
<div class="row">
<div class="col-md-4 main-holder">
<div id="slider">
<ul>
<li>SLIDE 1</li>
<li style="background: #aaa;">SLIDE 2</li>
<li>SLIDE 3</li>
<li style="background: #aaa;">SLIDE 4</li>
</ul>
</div>
<div class="bullets">
•
•
•
•
</div>
</div>
<div class="col-md-2">
<div class="thumbnails">
</div>
</div>
<div class="col-md-6">
<div class="text-holder">
</div>
</div>
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
html {
border-top: 5px solid #fff;
color: #2a2a2a;
}
html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans';
}
#slider {
position: relative;
margin: 20px auto 0 auto;
border-radius: 4px;
overflow: hidden;
}
#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 200px;
list-style: none;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 500px;
height: 300px;
background: #ccc;
text-align: center;
line-height: 300px;
}
.bullets{
display: block;
text-align: center;
margin-top: 15px;
list-style: none;
text-align: center;
width: 500px;
height: 300px;
}
.bullets a{
font-size: 40px;
text-decoration: none;
color: #ccc;
}
.bullets a:hover{
color: #E22C26!important;
}
.active-bullet {
color: #E22C26!important;
}
.thumbnails{
height: 300px;
border: 1px solid red;
position: relative;
left: 150px;
margin-top: 20px;
}
.text-holder{
border: 1px solid blue;
height: 300px;
margin-top: 20px;
margin-left: 150px;
}

creating zoom in effect on clicking the thumbnail or link

This link has a carousel similar to what I'm trying to implement
I have a basic slider for images.
Something like this Example
jQuery(document).ready(function ($) {
$('#checkbox').change(function(){
setInterval(function () {
moveRight();
}, 3000);
});
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#slider').css({ width: slideWidth, height: slideHeight });
$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider ul li:last-child').prependTo('#slider ul');
function moveLeft() {
$('#slider ul').animate({
left: + slideWidth
}, 200, function () {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};
function moveRight() {
$('#slider ul').animate({
left: - slideWidth
}, 200, function () {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
};
$('a.control_prev').click(function () {
moveLeft();
});
$('a.control_next').click(function () {
moveRight();
});
});
html {
border-top: 5px solid #fff;
background: #8A8A8A;
color: #2a2a2a;
}
html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans';
}
h1 {
color: #fff;
text-align: center;
font-weight: 300;
}
#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
}
#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 600px;
list-style: none;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 1200px;
height: 600px;
background: #ccc;
text-align: center;
line-height: 300px;
}
a.control_prev, a.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
}
a.control_prev:hover, a.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}
a.control_prev {
border-radius: 0 2px 2px 0;
}
a.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}
.slider_option {
position: relative;
margin: 10px auto;
width: 160px;
font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="slider">
>>
<
<ul>
<li>SLIDE 1</li>
<li style="background: #fff;">SLIDE 2</li>
<li>SLIDE 3</li>
<li style="background: #fff;">SLIDE 4</li>
</ul>
</div>
<div class="slider_option">
<input type="checkbox" id="checkbox">
<label for="checkbox">Autoplay Slider</label>
</div>
I want the slider to open upon clicking on a button/link. I am new to jQuery, so I'm not sure if that's possible using onclick event. Can someone please tell me the basic idea that goes behind this implementation? Thank you!

Place a button in your HTML and use it to show your slides on click. Also wrap your complete Slider related HTML inside a div and hide the dive initially. Like below.
<button id="showSlider">Show me the slider</button>
<div id="sliderWrapper" style="display:none;">
<!--Your current HTML goes here-->
</div>
With this in place, Now put all the current logic in your scripts inside a function. Lets call this function when ever we click the button.
function SliderScripts() {
//all your current scripts goes here
}
Now modify your document ready function to below.
jQuery(document).ready(function($) {
$('#showSlider').on('click', function() { // button click event
SliderScripts(); // run the sliders scripts
$('#sliderWrapper').show(); / show the slider.
$(this).hide(); //hide the button
});
});
Here is a working snippet.
jQuery(document).ready(function($) {
$('#showSlider').on('click', function() {
SliderScripts();
$('#sliderWrapper').show();
$(this).hide();
});
});
function SliderScripts() {
$('#checkbox').change(function() {
setInterval(function() {
moveRight();
}, 3000);
});
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#slider').css({
width: slideWidth,
height: slideHeight
});
$('#slider ul').css({
width: sliderUlWidth,
marginLeft: -slideWidth
});
$('#slider ul li:last-child').prependTo('#slider ul');
function moveLeft() {
$('#slider ul').animate({
left: +slideWidth
}, 200, function() {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};
function moveRight() {
$('#slider ul').animate({
left: -slideWidth
}, 200, function() {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
};
$('a.control_prev').click(function() {
moveLeft();
});
$('a.control_next').click(function() {
moveRight();
});
}
html {
border-top: 5px solid #fff;
background: #8A8A8A;
color: #2a2a2a;
}
html,
body {
margin: 0;
padding: 0;
font-family: 'Open Sans';
}
h1 {
color: #fff;
text-align: center;
font-weight: 300;
}
#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
}
#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 600px;
list-style: none;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 1200px;
height: 600px;
background: #ccc;
text-align: center;
line-height: 300px;
}
a.control_prev,
a.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
}
a.control_prev:hover,
a.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}
a.control_prev {
border-radius: 0 2px 2px 0;
}
a.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}
.slider_option {
position: relative;
margin: 10px auto;
width: 160px;
font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button id="showSlider">Show me the slider</button>
<div id="sliderWrapper" style="display:none;">
<div id="slider">
>>
<a href="#" class="control_prev">
</a>
<ul>
<li>SLIDE 1</li>
<li style="background: #fff;">SLIDE 2</li>
<li>SLIDE 3</li>
<li style="background: #fff;">SLIDE 4</li>
</ul>
</div>
<div class="slider_option">
<input type="checkbox" id="checkbox">
<label for="checkbox">Autoplay Slider</label>
</div>
</div>

Add class the slider on click and style the slide element with css something like
element.active {
position: fixed;
top: 50px;
left: 50%;
transform: translateX(-50%);
bottom: 50px;
z-index: 9999;
}
then the element will pop out from the slide and you can add anything you want to the active class of the element. and in your example click the slide element
$('#slider li').on('click', function () {
$(this).toggleClass('active');
});
the css for the active class
li.active {
position: fixed !important;
top: 50px;
left: 50%;
transform: translateX(-50%);
bottom: 50px;
}
for simple overlay
li.active:after {
content: '';
position: fixed;
top: -50px;
bottom: -50px;
background: rgba(0,0,0,0.75);
left: -50%;
width: 200%;
height: 200%;
}

Move div blocks with

I need make something like slider. But I have problem with jQuery I don't know how right force to move my items. Maybe I make not properly css file and maybe this need change? Help please.
I have html:
<div class="carusel-section">
<div class="top-indent">
<div class="carusel-container">
<div class="arrow-back">
<img src="img/arrow-back.png" alt="back">
</div>
<div class="item item-first"><h4 class="item-text">200x120</h4></div>
<div class="item"><h4 class="item-text">200x120</h4></div>
<div class="item"><h4 class="item-text">200x120</h4></div>
<div class="item"><h4 class="item-text">200x120</h4></div>
<div class="item"><h4 class="item-text">200x120</h4></div>
<div class="item"><h4 class="item-text">200x120</h4></div>
<div class="arrow-forward">
<img src="img/arrow-forward.png" alt="forward">
</div>
</div>
</div>
</div>
Css:
.carusel-container {
max-width: 742px;
margin-left: 5px;
}
.carusel-container:before {
width: 40px;
left: 17px;
}
.carusel-container .arrow-back {
top: 43px;
left: 28px;
}
.carusel-container .item-first {
margin: 0 0 0 57px;
}
.carusel-container .arrow-forward {
top: 43px;
right: 12px;
}
jQuery:
$(".arrow-back").click(function () {
console.log("BACKKK");
$(".item").css("margin-left", "-50px");
});
$(".arrow-forward").click(function () {
console.log("TOWARDDD");
$(".item").css("margin-right", "-50px");
});

Initially, one element should appear only and all the others should be hidden
On pressing the next button, all the elements should disappear except the next element, and same thing to back button
I recommend you to use this simple code:
HTML Code:
<div id="carousel-container">
>>
<ul>
<li>200x120</li>
<li>200x120</li>
<li>200x120</li>
<li>200x120</li>
<li>200x120</li>
<li>200x120</li>
</ul>
<<
</div>
CSS Code:
#carousel-container {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
}
#carousel-container ul {
position: relative;
margin: 0;
padding: 0;
height: 200px;
list-style: none;
}
#carousel-container ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 500px;
height: 300px;
background: #ccc;
text-align: center;
line-height: 300px;
}
a.control_prev,
a.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
}
a.control_prev:hover,
a.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}
a.control_prev {
border-radius: 0 2px 2px 0;
}
a.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}
JS Code:
jQuery(document).ready(function ($) {
var slideCount = $('#carousel-container ul li').length;
var slideWidth = $('#carousel-container ul li').width();
var slideHeight = $('#carousel-container ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#carousel-container').css({ width: slideWidth, height: slideHeight });
$('#carousel-container ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#carousel-container ul li:last-child').prependTo('#carousel-container ul');
function moveLeft() {
$('#carousel-container ul').animate({
left: + slideWidth
}, 200, function () {
$('#carousel-container ul li:last-child').prependTo('#carousel-container ul');
$('#carousel-container ul').css('left', '');
});
};
function moveRight() {
$('#carousel-container ul').animate({
left: - slideWidth
}, 200, function () {
$('#carousel-container ul li:first-child').appendTo('#carousel-container ul');
$('#carousel-container ul').css('left', '');
});
};
$('a.control_prev').click(function () {
moveLeft();
});
$('a.control_next').click(function () {
moveRight();
});
});
Check it out.

I have created a jquery carousel, and using if condition to run and stop the carousel

I have created a jQuery carousel with if condition to run and stop it, if the checkBox is checked the carousel run towards left it is happening, else if the checkBox is UNchecked the carousel needs to stop, i don't know to do this, someone please help me to do this
$("#checkBox").click(function(){
if($(this).prop("checked") == true){
carouselRun();
}
else if($(this).prop("checked") == false){
carouselStop();
}
});
jQuery(document).ready(function ($) {
var mslideWidth = 500, mslideHeight = 105, speed = 3000,
slideCount = $('#slider ul li').length,
slideWidth = $('#slider ul li').width(),
slideHeight = $('#slider ul li').height(),
sliderUlWidth = slideCount * slideWidth;
function carouselRun(){
setInterval(function () {
moveRight();
}, speed);
};
function carouselStop(){
setInterval(function () {
moveLeft();
}, speed).stop();
};
$('#checkBox').click(function(){
if($(this).prop("checked") == true){
carouselRun();
}
else if ($(this).prop("checked") == false){
carouselStop();
}
});
if (mslideWidth != 0 || mslideHeight != 0){
slideWidth = mslideWidth;
slideHeight = mslideHeight;
$('#slider ul li').css('width',mslideWidth);
$('#slider ul li').css('height',mslideHeight);
}
$('#slider').css({ width: slideWidth, height: slideHeight });
$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider ul li:last-child').prependTo('#slider ul');
function moveLeft() {
$('#slider ul').animate({
left: + slideWidth
}, function () {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};
function moveRight() {
$('#slider ul').animate({
left: - slideWidth
},function () {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
};
$('a.control_prev').click(function () {
moveLeft();
});
$('a.control_next').click(function () {
moveRight();
});
});
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
html {
border-top: 5px solid #fff;
background: #58DDAF;
color: #2a2a2a;
}
html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans';
}
h1 {
color: #fff;
text-align: center;
font-weight: 300;
}
#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
}
#slider ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 500px;
height: 100px;
background: #ccc;
text-align: center;
}
a.control_prev, a.control_next {
position: absolute;
top: 10%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
}
a.control_prev:hover, a.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}
a.control_prev {
border-radius: 0 2px 2px 0;
}
a.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}
.slider_option {
position: relative;
margin: 10px auto;
width: 160px;
font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider_option">
<input type="checkbox" id="checkBox">
<label for="checkbox">Autoplay Slider</label>
</div>
<div id="slider">
>>
<
<ul>
<li>SLIDE 1</li>
<li style="background: #aaa;">SLIDE 2</li>
<li>SLIDE 3</li>
<li style="background: #aaa;">SLIDE 4</li>
</ul>
</div>

You need to use clearInterval function to stop the timer and the carousel. Change carouselRunand carouselStopfunctions with following and add interval variable to the place you defined your variables.
function carouselRun(){
interval = setInterval(function () {
moveRight();
}, speed);
};
function carouselStop(){
clearInterval(interval);
};
Working example:
jQuery(document).ready(function ($) {
var mslideWidth = 500, mslideHeight = 105, speed = 3000,
slideCount = $('#slider ul li').length,
slideWidth = $('#slider ul li').width(),
slideHeight = $('#slider ul li').height(),
sliderUlWidth = slideCount * slideWidth,
interval;
function carouselRun(){
interval = setInterval(function () {
moveRight();
}, speed);
};
function carouselStop(){
clearInterval(interval);
};
$('#checkBox').click(function(){
if($(this).prop("checked") == true){
carouselRun();
}
else if($(this).prop("checked") == false){
carouselStop();
}
});
if(mslideWidth != 0 || mslideHeight != 0){
slideWidth = mslideWidth;
slideHeight = mslideHeight;
$('#slider ul li').css('width',mslideWidth);
$('#slider ul li').css('height',mslideHeight);
}
$('#slider').css({ width: slideWidth, height: slideHeight });
$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider ul li:last-child').prependTo('#slider ul');
function moveLeft() {
$('#slider ul').animate({
left: + slideWidth
}, function () {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};
function moveRight() {
$('#slider ul').animate({
left: - slideWidth
},function () {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
};
$('a.control_prev').click(function () {
moveLeft();
});
$('a.control_next').click(function () {
moveRight();
});
});
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
html {
border-top: 5px solid #fff;
background: #58DDAF;
color: #2a2a2a;
}
html, body {
margin: 0;
padding: 0;
font-family: 'Open Sans';
}
h1 {
color: #fff;
text-align: center;
font-weight: 300;
}
#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
}
#slider ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 500px;
height: 100px;
background: #ccc;
text-align: center;
}
a.control_prev, a.control_next {
position: absolute;
top: 10%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
}
a.control_prev:hover, a.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}
a.control_prev {
border-radius: 0 2px 2px 0;
}
a.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}
.slider_option {
position: relative;
margin: 10px auto;
width: 160px;
font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider_option">
<input type="checkbox" id="checkBox">
<label for="checkbox">Autoplay Slider</label>
</div>
<div id="slider">
>>
<
<ul>
<li>SLIDE 1</li>
<li style="background: #aaa;">SLIDE 2</li>
<li>SLIDE 3</li>
<li style="background: #aaa;">SLIDE 4</li>
</ul>
</div>

Categories

Resources