Vanilla JS - Infinite Auto play Slider

Vanilla JS - Infinite Auto play Slider - javascript

I'm going to make a responsive slider that automatically plays.The code I had at first is this.
It's working properly.
However, I'm going to separate the code because it doesn't play automatically.
I tried to auto-play the slides through setInterval(slider,3000), but it didn't work properly.
Realizing that it is a problem caused by all the content in the 'function slider', I separated the button from the press to create two functions, but it did not work. I don't know what to do...
function slider() {
let slides = document.querySelectorAll(".slide"),
slider = document.querySelector(".slider"),
last = slider.lastElementChild,
first = slider.firstElementChild,
btn = document.querySelectorAll(".btn");
slider.insertBefore(last, first);
btn.forEach(btn => {
btn.addEventListener("click", movement);
});
function movement(e) {
slider = document.querySelector(".slider");
last = slider.lastElementChild;
first = slider.firstElementChild;
const activeSlide = document.querySelector(".active");
if (e.target.id === "next") {
slider.insertBefore(first, last.nextSibling);
activeSlide.classList.remove("active");
activeSlide.nextElementSibling.classList.add("active");
} else {
slider.insertBefore(last, first);
activeSlide.classList.remove("active");
activeSlide.previousElementSibling.classList.add("active");
}
}
}
slider();
* {
margin: 0;
padding: 0;
}
.slider {
position: relative;
width: 100vw;
max-width: 100%;
height: 300px;
margin: auto;
overflow: hidden;
}
.slide {
width: 100%;
height: 300px;
position: absolute;
text-align: center;
-webkit-transition: 0.6s ease;
transition: 0.6s ease;
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
.slide.active {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.slide.active ~ .slide {
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
text-align: center;
}
.slide {
background:#222;
color: white;
padding: 30px;
}
button {
margin-top: 20px;
border: none;
border-radius: 0;
background: aliceblue;
color: #333;
padding: 10px;
cursor: pointer;
}
<div class="slider__wrapper">
<div class="slider">
<div class="slide active">
<h3>Slide One</h3>
<p>test</p>
</div>
<div class="slide">
<h3>Slide Two</h3>
<p>test</p>
</div>
<div class="slide">
<h3>Slide Three</h3>
<p>1234</p>
</div>
</div>
<button id="prev" class="btn">Prev</button>
<button id="next" class="btn">Next</button>
</div>

Because you are using event inside movement() function to see which button was pressed, you can supply a "dummy" object with the direction instead:
function slider() {
let slides = document.querySelectorAll(".slide"),
slider = document.querySelector(".slider"),
last = slider.lastElementChild,
first = slider.firstElementChild,
btn = document.querySelectorAll(".btn");
slider.insertBefore(last, first);
btn.forEach(btn => {
btn.addEventListener("click", movement);
});
setInterval(function()
{
movement({target:{id:"next"}});
}, 3000);
function movement(e) {
slider = document.querySelector(".slider");
last = slider.lastElementChild;
first = slider.firstElementChild;
const activeSlide = document.querySelector(".active");
if (e.target.id === "next") {
slider.insertBefore(first, last.nextSibling);
activeSlide.classList.remove("active");
activeSlide.nextElementSibling.classList.add("active");
} else {
slider.insertBefore(last, first);
activeSlide.classList.remove("active");
activeSlide.previousElementSibling.classList.add("active");
}
}
}
slider();
* {
margin: 0;
padding: 0;
}
.slider {
position: relative;
width: 100vw;
max-width: 100%;
height: 300px;
margin: auto;
overflow: hidden;
}
.slide {
width: 100%;
height: 300px;
position: absolute;
text-align: center;
-webkit-transition: 0.6s ease;
transition: 0.6s ease;
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
.slide.active {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.slide.active~.slide {
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
text-align: center;
}
.slide {
background: #222;
color: white;
padding: 30px;
}
button {
margin-top: 20px;
border: none;
border-radius: 0;
background: aliceblue;
color: #333;
padding: 10px;
cursor: pointer;
}
<div class="slider__wrapper">
<div class="slider">
<div class="slide active">
<h3>Slide One</h3>
<p>test</p>
</div>
<div class="slide">
<h3>Slide Two</h3>
<p>test</p>
</div>
<div class="slide">
<h3>Slide Three</h3>
<p>1234</p>
</div>
</div>
<button id="prev" class="btn">Prev</button>
<button id="next" class="btn">Next</button>
</div>

Related

How reverse animation css in js?

I have problem, I wanted reverse animation in JS, before the "animationToggler" class is deleted, I tried to add the code that is commented out, but this not working.
Codepen
const menuToggler = document.querySelector('.toggler .hamburger');
menuToggler.addEventListener('click', function() {
this.classList.toggle('animationToggler');
// if(this.classList.contains('animationToggler')){
// this.style.animationDirection = "reverse"
// }
setTimeout(() => {
this.classList.toggle('active');
}, 400)
});
.toggler {
display: flex;
align-items: center;
cursor: pointer;
}
.animationToggler {
animation: animationTogglerMenu .8s ease;
}
.toggler p {
margin: 0;
text-transform: uppercase;
font-size: 1.65rem;
margin: 0 0 0 10px;
}
.hamburger .line {
height: 4px;
width: 2.5em;
background: #000;
margin: .45em 0;
border-radius: 50px;
transition: .6s;
}
.active .one {
transform: rotate(45deg) translateY(15px);
}
.active .two {
background-color: transparent;
transition: none;
}
.active .three {
transform: rotate(-45deg) translateY(-15px);
}
#keyframes animationTogglerMenu {
100% {
transform: rotate(720deg);
}
}
<div class="toggler">
<div class="hamburger">
<div class="line one"></div>
<div class="line two"></div>
<div class="line three"></div>
</div>
<p>Menu</p>
</div>

I managed to do it myself, this is code in the JS
const menuToggler = document.querySelector('.toggler');
const menuTogglerHamburger = document.querySelector('.toggler .hamburger');
menuToggler.addEventListener('click', function(){
//checking if there is a class animationToggler
if(menuTogglerHamburger.classList.contains('animationToggler')){
//restart animation rotate
menuTogglerHamburger.classList.remove('animationToggler');
void menuTogglerHamburger.offsetWidth;
menuTogglerHamburger.classList.add('animationToggler');
}
menuTogglerHamburger.classList.add('animationToggler');
setTimeout(()=>{
//animation line on the cross
menuTogglerHamburger.classList.toggle('active');
}, 200)
});

mouseenter clearInterval() in vanila JS carousel

I have an infinity carousel with 3 slides. I was able to separate functions with help. I want the function slider to stop when I put my mouse on this slide, and when I take my mouse off, it will work again.
ClearInterval was used through addEventListner, but it did not work. ClearInterval (movement) also did not work within the movement function.
The last function I tested was this. What should I do to implement this function? clearInterval(slider) is not working
function slider() {
let slides = document.querySelectorAll(".slide"),
slider = document.querySelector(".slider"),
last = slider.lastElementChild,
first = slider.firstElementChild,
btn = document.querySelectorAll(".btn");
slider.insertBefore(last, first);
btn.forEach(btn => {
btn.addEventListener("click", movement);
});
setInterval(function () {
movement({
target: {
id: "next"
}
});
}, 8000);
function movement(e) {
slider = document.querySelector(".slider");
last = slider.lastElementChild;
first = slider.firstElementChild;
const activeSlide = document.querySelector(".active");
if (e.target.id === "next") {
slider.insertBefore(first, last.nextSibling);
activeSlide.classList.remove("active");
activeSlide.nextElementSibling.classList.add("active");
} else {
slider.insertBefore(last, first);
activeSlide.classList.remove("active");
activeSlide.previousElementSibling.classList.add("active");
}
}
}
slider();
let slides = document.querySelectorAll(".slide");
for (i = 0; i < slides.length; i++) {
slides[i].mouseenter(function () {
clearInterval(slider);
}).mouseleave(function () {
setInterval(function () {
movement({
target: {
id: "next"
}
});
}, 8000);
})
}
* {
margin: 0;
padding: 0;
}
.slider {
position: relative;
width: 100vw;
max-width: 100%;
height: 120px;
margin: auto;
overflow: hidden;
}
.slide {
width: 100%;
height: 300px;
position: absolute;
text-align: center;
-webkit-transition: 0.6s ease;
transition: 0.6s ease;
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
.slide.active {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.slide.active~.slide {
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
text-align: center;
}
.slide {
background: #222;
color: white;
padding: 30px;
}
button {
margin-top: 20px;
border: none;
border-radius: 0;
background: aliceblue;
color: #333;
padding: 10px;
cursor: pointer;
}
<div class="slider__wrapper">
<div class="slider">
<div class="slide active">
<h3>Slide One</h3>
<p>test</p>
</div>
<div class="slide">
<h3>Slide Two</h3>
<p>test</p>
</div>
<div class="slide">
<h3>Slide Three</h3>
<p>1234</p>
</div>
</div>
<button id="prev" class="btn">Prev</button>
<button id="next" class="btn">Next</button>
</div>

Below is the working fine as you expected.clearInterval function needs the value that is returned by setInterval, another problem is defining the "movement" function in parallel to the slider function so that it can be accessed from mouseleave event.
<!DOCTYPE html>
<html>
<style>
* {
margin: 0;
padding: 0;
}
.slider {
position: relative;
width: 100vw;
max-width: 100%;
height: 120px;
margin: auto;
overflow: hidden;
}
.slide {
width: 100%;
height: 300px;
position: absolute;
text-align: center;
-webkit-transition: 0.6s ease;
transition: 0.6s ease;
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
.slide.active {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.slide.active~.slide {
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
text-align: center;
}
.slide {
background: #222;
color: white;
padding: 30px;
}
button {
margin-top: 20px;
border: none;
border-radius: 0;
background: aliceblue;
color: #333;
padding: 10px;
cursor: pointer;
}
</style>
<body>
<div class="slider__wrapper">
<div class="slider">
<div class="slide active">
<h3>Slide One</h3>
<p>test</p>
</div>
<div class="slide">
<h3>Slide Two</h3>
<p>test</p>
</div>
<div class="slide">
<h3>Slide Three</h3>
<p>1234</p>
</div>
</div>
<button id="prev" class="btn">Prev</button>
<button id="next" class="btn">Next</button>
</div>
</body>
<script>
var sliderInterval = '';
function movement(e) {
slider = document.querySelector(".slider");
last = slider.lastElementChild;
first = slider.firstElementChild;
const activeSlide = document.querySelector(".active");
if (e.target.id === "next") {
slider.insertBefore(first, last.nextSibling);
activeSlide.classList.remove("active");
activeSlide.nextElementSibling.classList.add("active");
} else {
slider.insertBefore(last, first);
activeSlide.classList.remove("active");
activeSlide.previousElementSibling.classList.add("active");
}
}
function slider() {
let slides = document.querySelectorAll(".slide"),
slider = document.querySelector(".slider");
console.log("slider=========",slider);
let last = slider.lastElementChild,
first = slider.firstElementChild,
btn = document.querySelectorAll(".btn");
slider.insertBefore(last, first);
btn.forEach(btn => {
btn.addEventListener("click", movement);
});
sliderInterval = setInterval(function () {
movement({
target: {
id: "next"
}
});
}, 1000);
}
slider();
let slides = document.querySelectorAll(".slide");
for (i = 0; i < slides.length; i++) {
console.log("slides[i]=========",slides[i]);
slides[i].addEventListener('mouseenter', function(){
console.log("on mouseenter");
clearInterval(sliderInterval);
})
slides[i].addEventListener('mouseleave', function(){
sliderInterval = setInterval(function () {
movement({
target: {
id: "next"
}
});
}, 1000);
})
}
</script>
</html>

Keep the 3D Cube of Images Continue to Transition at the Same Side

I have used this tutorial to create a cube of images that move as a slideshow.
https://webdevtrick.com/css-3d-cube-carousel/?unapproved=16788&moderation-hash=ec78aa2bd99b49552d07f0ec60049b18#comment-16788
see what is doing https://files.fm/u/s2ywz7my
I have managed this to be automatically moved using setInterval. When the cube reached the fourth image. It moved back to the first one.
jQuery file
<script>
/** Code By Webdevtrick ( https://webdevtrick.com ) **/
var $carousel = $('.carousel'),currentSlide, nextSlide;
setInterval( function ()
{
currentSlide = $carousel.attr('data-slide');
nextSlide = +currentSlide === 4 ? 1 : +currentSlide + 1;
$carousel.attr('data-slide', nextSlide);
}
, 2000);
</script>
I want the cube to continue sliding to the left and also as it is moving around itself.

By adding some CSS and modify in JS, you can loop this cube slider. But it's animating by changing data-slide value and apply CSS to rotate cube. It's not dynamic slider.
Here is working Demo
$(document).ready(function() {
var $carousel = $('.carousel'),
currentSlide, nextSlide;
$('.next').click(function() {
if(!$carousel.hasClass('sliding')){
currentSlide = $carousel.attr('data-slide');
nextSlide = +currentSlide === 5 ? 0 : +currentSlide + 1;
$carousel.attr('data-slide', nextSlide);
$carousel.addClass('sliding');
}
$carousel.on('transitionend', function(){
if(nextSlide == 5){
$carousel.css('transition', 'none');
$carousel.attr('data-slide', 1);
setTimeout(function(){
$carousel.removeAttr('style');
},10);
}
$carousel.removeClass('sliding');
});
});
$('.prev').click(function() {
if(!$carousel.hasClass('sliding')){
currentSlide = $carousel.attr('data-slide');
nextSlide = +currentSlide === 0 ? 5 : +currentSlide - 1;
$carousel.attr('data-slide', nextSlide);
$carousel.addClass('sliding');
}
$carousel.on('transitionend', function(){
if(nextSlide == 0){
$carousel.css('transition', 'none');
$carousel.attr('data-slide', 4);
setTimeout(function(){
$carousel.removeAttr('style');
},10);
}
$carousel.removeClass('sliding');
});
});
});
/** Code By Webdevtrick ( https://webdevtrick.com ) **/
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
body {
margin-top: 200px;
background: #333;
font-family: 'Staatliches', cursive;
font-size: 2em;
line-height: 1.5;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding-bottom: 5em;
perspective: 100em;
}
.carousel {
position: relative;
width: 15em;
height: 15em;
margin: 0 auto;
transform-style: preserve-3d;
transition: transform 0.5s ease;
}
.carousel[data-slide="0"] {
transform: rotateY(90deg);
}
.carousel[data-slide="1"] {
transform: rotateY(0deg);
}
.carousel[data-slide="2"] {
transform: rotateY(-90deg);
}
.carousel[data-slide="3"] {
transform: rotateY(-180deg);
}
.carousel[data-slide="4"] {
transform: rotateY(-270deg);
}
.carousel[data-slide="5"] {
transform: rotateY(-360deg);
}
.slides {
position: absolute;
width: 15em;
height: 15em;
background: white;
}
.slides img {
width: 100%;
}
.back, .slides:nth-child(3) {
transform: translateZ(-7.5em) rotateY(180deg);
}
.right, .slides:nth-child(2) {
transform: rotateY(-270deg) translateX(7.5em);
transform-origin: top right;
}
.left, .slides:nth-child(4) {
transform: rotateY(270deg) translateX(-7.5em);
transform-origin: center left;
}
.front, .slides:nth-child(1) {
transform: translateZ(7.5em);
}
.next, .prev {
position: absolute;
top: 50%;
right: 0;
width: 6em;
margin-top: -2.5em;
border-radius: 3px;
background: #212121;
text-align: center;
line-height: 3;
letter-spacing: 5px;
color: white;
transform: translateY(-50%);
cursor: pointer;
}
.prev:hover {
background: #e60023;
}
.prev {
left: 0;
}
.next:hover {
background: #e60023;
}
.cf:before, .slides:before,
.cf:after,
.slides:after {
content: " ";
display: table;
}
.cf:after, .slides:after {
clear: both;
}
.cf, .slides {
*zoom: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="carousel" data-slide="1">
<div class="slides">
<img src="https://picsum.photos/700/700?random=1" />
</div>
<div class="slides">
<img src="https://picsum.photos/700/700?random=2" />
</div>
<div class="slides">
<img src="https://picsum.photos/700/700?random=3" />
</div>
<div class="slides">
<img src="https://picsum.photos/700/700?random=4" />
</div>
</div>
<div class="next">NEXT ⇨</div>
<div class="prev">⇦ PREV</div>
</div>
You can trigger next button in setInterval function to slide cube automatically. by adding.
setInterval( function () {
$('.next').trigger('click');
},2000);

JS slider error

jQuery(document).ready(function($) {
var sliderContentCount = $(".slider-container").length;
$(".slider-wrap").css("width", sliderContentCount + "00%");
var sliderContentWidth = 100 / sliderContentCount;
$(".slider-container").css("width", sliderContentWidth + "%");
var marginLimit = -(sliderContentCount - 1) * 100;
var marginRight = 0;
var marginLeft = 0;
$(".right-nav").click(function() {
if (marginRight != marginLimit) {
marginRight += -100;
}
var slideLeft = marginRight + "%";
$(".slider-wrap").css("margin-left", slideLeft);
if (marginRight == marginLimit) {
$(".right-nav").click(function() {
$(".slider-wrap").animate({
"margin-left": "0%"
}, 1000);
marginRight = 0;
})
}
})
$(".left-nav").click(function() {
if (marginRight <= 0) {
marginRight += 100;
if (marginRight <= 0) {
marginLeft = marginRight;
}
}
var slideRight = marginLeft + "%";
$(".slider-wrap").css("margin-left", slideRight);
})
});
.left-nav {
z-index: 1;
position: absolute;
top: 50%;
background-color: black;
float: left;
text-align: center;
color: white;
padding: 2%;
cursor: pointer;
}
.right-nav {
z-index: 1;
padding: 2%;
position: absolute;
top: 50%;
background-color: black;
right: 0.5%;
text-align: center;
color: white;
cursor: pointer;
}
.slider-outer-wrap {
height: 100%;
overflow: hidden;
border: 2px solid black;
}
.slider-wrap {
float: left;
-webkit-transform: translateZ(0);
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
.slider-container {
width: 25%;
float: left;
text-align: center;
}
.slider-container img {
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider-outer-wrap">
<div class="left-nav">
<</div>
<div class="slider-wrap">
<div class="slider-container">
<img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg">
</div>
<div class="slider-container">
<img src="http://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg">
</div>
<div class="slider-container">
<img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg">
</div>
<div class="slider-container">
<img src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg">
</div>
</div>
<div class="right-nav">></div>
The problem is when user clicks on the right-nav at last slide, it's margin-left becomes 0 and after this my right-nav js stops working (it doesn't slide anymore).
Please let me know where I'm doing wrong or how i can improve this. And please give suggestions to make it autoplay on load with these codes only.
thank you in advance.

Can anyone explain me why this slider keeps resizing when I insert it on website?

I've picked a slider from codepen.io and made some changes in the code and when I paste it in the embed code of Weebly (the software where I'm working) it doesn't work, because it doesn't stop resizing and getting bigger and bigger. How can I stop it? P.S. I noticed it starts doing that when I insert the JavaScript code...
$(document).ready(function() {
var slide = $('.slide');
var viewWidth = $(window).width();
var viewHeight = $(window).height();
var sliderInner = $('.slider-inner');
var childrenNo = sliderInner.children().length
sliderInner.width(viewWidth * childrenNo);
// ----------- INITIAL -----------
function setWidth() {
slide.each(function() {
$(this).width(viewWidth);
$(this).css('left', viewWidth * $(this).index());
});
}
function setHeight() {
$('.loading').css('height', viewHeight);
$('.loading').css('line-height', $('.loading').css('height'));
$('.slider').css('height', viewHeight);
slide.each(function() {
$(this).css('line-height', $('.slider').css('height'));
});
}
setWidth();
setHeight();
// ----------- /INITIAL -----------
// ----------- RESIZE -----------
$(window).resize(function() {
viewWidth = $(window).width();
viewHeight = $(window).height();
setWidth();
setHeight();
sliderInner.css("transform", "translateX(-" +
$('.slider-nav>div.active').index() *
viewWidth + "px) translateZ(0)");
$('.slider-inner').width(viewWidth * childrenNo);
});
// ----------- /RESIZE -----------
// ----------- SET ACTIVE -----------
function setActive(element) {
var clickedIndex = element.index();
$('.slider-nav .active').removeClass('active');
element.addClass('active');
sliderInner.css("transform", "translateX(-" + clickedIndex * (viewWidth * 0.33) + "px) translateZ(0)");
//translateZ(0)
$('.slider-inner .active').removeClass('active');
$('.slider-inner .slide').eq(clickedIndex).addClass('active');
}
// ON CLICK NAV
$('.slider-nav > div').on('click', function() {
setActive($(this));
});
// LEFT - CLICK
$('.slider-control.left').on('click', function() {
var indexPos = $('.slider-nav>div.active').index();
if (indexPos > 0) {
--indexPos;
} else {
indexPos = childrenNo - 1;
}
setActive($('.slider-nav > div').eq(indexPos));
});
// RIGHT - CLICK
$('.slider-control.right').on('click', function() {
var indexPos = $('.slider-nav>div.active').index();
if (indexPos == childrenNo - 1) {
indexPos = 0;
} else {
++indexPos;
}
setActive($('.slider-nav > div').eq(indexPos));
});
// LOADING
setTimeout(function() {
$(".slider").fadeIn(500);
}, 500);
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Roboto", sans-serif;
font-weight: 300;
}
.head {
position: fixed;
top: 0;
left: 0;
z-index: 9;
padding: 40px;
color: #fff;
}
.head h1 {
font-weight: 300;
font-size: 4em;
}
.head p.author {
text-align: right;
}
.head p.console {
font-size: 10px;
color: #fff;
}
.loading {
background-color: #2ecc71;
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 500px;
line-height: 500px;
text-align: center;
color: #fff;
font-size: 2rem;
}
.slider {
background-color: #fff;
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
display: none;
}
.slider .slider-control {
height: 100%;
width: 100px;
background-color: #fff;
opacity: 0.01;
position: absolute;
top: 0;
z-index: 20;
cursor: pointer;
-webkit-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-delay: 0;
transition-delay: 0;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.slider .slider-control:hover {
opacity: 0.2;
}
.slider .left {
left: 0;
}
.slider .right {
right: 0;
}
.slider .slider-inner {
position: absolute;
left: 0;
top: 0;
height: 100%;
background-visibility: hidden;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.slider .slider-inner .slide {
position: absolute;
top: 0;
height: 100%;
background-color: #f1c40f;
text-align: center;
line-height: 500px;
font-size: 5rem;
color: #fff;
}
.slider .slider-inner .slide.active {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
.slider .slider-inner .slide:nth-child(2n) {
background-color: #2ecc71;
}
.slider .slider-inner .slide:nth-child(3n) {
background-color: #3498db;
}
.slider .slider-inner .slide:nth-child(4n) {
background-color: #9b50ba;
}
.slider-nav {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding: 5px;
padding-bottom: 20px;
text-align: center;
}
.slider-nav>div {
float: left;
width: 20px;
height: 20px;
border: 1px solid #fff;
z-index: 2;
display: inline-block;
margin: 0 15px;
cursor: pointer;
border-radius: 50%;
opacity: 0.5;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
background-color: transparent;
}
.slider-nav>div:hover {
opacity: 1;
}
.slider-nav>div.active {
background-color: white;
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
.long {
height: 2000px;
width: 100%;
background-color: #2ecc71;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="head">
<h1>Gummy Slider</h1>
<p class="console">test console</p>
</div>
<div class="loading">
<p>Loading...</p>
</div>
<div class="slider">
<div class="slider-control left"></div>
<div class="slider-control right"></div>
<div class="slider-inner">
<div class="slide active">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
<div class="slide">6</div>
<div class="slide">7</div>
<div class="slide">8</div>
</div>
<div class="slider-nav">
<div class="active"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="long"></div>
<script type="text/javascript">
Thanks,
Tom

You forgot a </script> in your code and that is probably the issue here. I tried this myself and it worked great.
Try the following:
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
</head>
<body>
<div class="head">
<h1>Gummy Slider</h1>
<p class="console">test console</p>
</div>
<div class="loading">
<p>Loading...</p>
</div>
<div class="slider">
<div class="slider-control left"></div>
<div class="slider-control right"></div>
<div class="slider-inner">
<div class="slide active">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
<div class="slide">6</div>
<div class="slide">7</div>
<div class="slide">8</div>
</div>
<div class="slider-nav">
<div class="active"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="long"></div>
<script type="text/javascript">
$(document).ready(function(){
var slide = $('.slide');
var viewWidth = $(window).width();
var viewHeight = $(window).height();
var sliderInner = $('.slider-inner');
var childrenNo = sliderInner.children().length
sliderInner.width( viewWidth * childrenNo);
// ----------- INITIAL -----------
function setWidth() {
slide.each(function(){
$(this).width(viewWidth);
$(this).css('left', viewWidth * $(this).index());
});
}
function setHeight(){
$('.loading').css('height', viewHeight);
$('.loading').css('line-height', $('.loading').css('height'));
$('.slider').css('height', viewHeight);
slide.each(function(){
$(this).css('line-height', $('.slider').css('height'));
});
}
setWidth();
setHeight();
// ----------- /INITIAL -----------
// ----------- RESIZE -----------
$(window).resize(function(){
viewWidth = $(window).width();
viewHeight = $(window).height();
setWidth();
setHeight();
sliderInner.css("transform", "translateX(-" +
$('.slider-nav>div.active').index() *
viewWidth + "px) translateZ(0)");
$('.slider-inner').width( viewWidth * childrenNo);
});
// ----------- /RESIZE -----------
// ----------- SET ACTIVE -----------
function setActive(element) {
var clickedIndex = element.index();
$('.slider-nav .active').removeClass('active');
element.addClass('active');
sliderInner.css("transform", "translateX(-" + clickedIndex * (viewWidth * 0.33) + "px) translateZ(0)");
//translateZ(0)
$('.slider-inner .active').removeClass('active');
$('.slider-inner .slide').eq(clickedIndex).addClass('active');
}
// ON CLICK NAV
$('.slider-nav > div').on('click', function(){
setActive($(this));
});
// LEFT - CLICK
$('.slider-control.left').on('click', function(){
var indexPos = $('.slider-nav>div.active').index();
if (indexPos > 0) { --indexPos;
} else { indexPos = childrenNo-1; }
setActive($('.slider-nav > div').eq(indexPos));
});
// RIGHT - CLICK
$('.slider-control.right').on('click', function(){
var indexPos = $('.slider-nav>div.active').index();
if (indexPos == childrenNo-1) { indexPos = 0;
} else { ++indexPos; }
setActive($('.slider-nav > div').eq(indexPos));
});
// LOADING
setTimeout(function(){
$(".slider").fadeIn(500);
}, 500);
});
</script>
<style type="text/css">
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Roboto", sans-serif;
font-weight: 300;
}
.head {
position: fixed;
top: 0;
left: 0;
z-index: 9;
padding: 40px;
color: #fff;
}
.head h1 {
font-weight: 300;
font-size: 4em;
}
.head p.author {
text-align: right;
}
.head p.console {
font-size: 10px;
color: #fff;
}
.loading {
background-color: #2ecc71;
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 500px;
line-height: 500px;
text-align: center;
color: #fff;
font-size: 2rem;
}
.slider {
background-color: #fff;
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
display: none;
}
.slider .slider-control {
height: 100%;
width: 100px;
background-color: #fff;
opacity: 0.01;
position: absolute;
top: 0;
z-index: 20;
cursor: pointer;
-webkit-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-delay: 0;
transition-delay: 0;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.slider .slider-control:hover {
opacity: 0.2;
}
.slider .left {
left: 0;
}
.slider .right {
right: 0;
}
.slider .slider-inner {
position: absolute;
left: 0;
top: 0;
height: 100%;
background-visibility: hidden;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.slider .slider-inner .slide {
position: absolute;
top: 0;
height: 100%;
background-color: #f1c40f;
text-align: center;
line-height: 500px;
font-size: 5rem;
color: #fff;
}
.slider .slider-inner .slide.active {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
.slider .slider-inner .slide:nth-child(2n) {
background-color: #2ecc71;
}
.slider .slider-inner .slide:nth-child(3n) {
background-color: #3498db;
}
.slider .slider-inner .slide:nth-child(4n) {
background-color: #9b50ba;
}
.slider-nav {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
padding: 5px;
padding-bottom: 20px;
text-align: center;
}
.slider-nav > div {
float: left;
width: 20px;
height: 20px;
border: 1px solid #fff;
z-index: 2;
display: inline-block;
margin: 0 15px;
cursor: pointer;
border-radius: 50%;
opacity: 0.5;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
background-color: transparent;
}
.slider-nav > div:hover {
opacity: 1;
}
.slider-nav > div.active {
background-color: white;
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
.long {
height: 2000px;
width: 100%;
background-color: #2ecc71;
}
</style>
</body></html>

We Keep Coding

JavaScript is the programming language of the Web.

Vanilla JS - Infinite Auto play Slider - javascript

Related

How reverse animation css in js?

mouseenter clearInterval() in vanila JS carousel

Keep the 3D Cube of Images Continue to Transition at the Same Side

JS slider error

Can anyone explain me why this slider keeps resizing when I insert it on website?

Categories

Resources