HTML Carousel not registering - javascript

I am trying to get my carousel to function, but when clicking on the arrows, the slides don't change.
This is my code,
http://codepen.io/rkrc/pen/ogPaqM
HTML:
<div class="slider">
<!-- picture 01 -->
<div class="slide active-slide">
<div class="container">
<img src="image">
</div>
</div>
<!-- picture 02 -->
<div class="slide">
<div class="container">
<img src="image">
</div>
</div>
<!-- picture 03 -->
<div class="slide">
<div class="container">
<img src="image">
</div>
</div>
<!-- picture 04 -->
<div class="slide">
<div class="container">
<img src="image">
</div>
</div>
<!-- picture 05 -->
<div class="slide">
<div class="container">
<img src="image">
</div>
</div>
</div>
<!-- Slider nav -->
<div class="slider-nav">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png">
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</div>
<!--End of slide show-->
CSS:
/* Carousel */
.slider {
background-color: #f7f7f7;
position: relative;
width: 100%;
height: 400px;
border-bottom: 10px solid #f7f7f7;
border-top: 10px solid #f7f7f7;
}
.slide {
text-align: center;
background: #f7f7f7;
display: none;
position: relative;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
JS:
var main = function(){
//Carousel
$('.arrow-next').click(function(){
var currentSlide = $('.active-slide');
var nextSlide= currentSlide.next();
if(nextSlide.length === 0){
nextSlide = $('.slide').first();
}
currentSlide.fadeout(600).removeClass('active-slide');
nextSlide.faseIn(600).addClass('active-slide');
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if(nextDot.length === 0){
nextDot = $('.dot').first();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
};
$(document).ready(main);
This is what I am trying to achieve, following the codecademy example.
http://codepen.io/rkrc/pen/Wbappy


You have some typos in the code as nevermind mentioned. fasein() should be fadeIn() and fadeout() needs to be capitalized to fadeOut(). However even with these fixes you may still run into some problems as the slider will show the next slide in the series before the fadeOut() animation is complete. Best to put the fadeIn() animation and target next slide in the callBack function of the active slide animation. Here's an example of something you could do:
currentSlide.fadeOut(600, function(){
$(this).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
hope this helps.


My changes to the JS file:
var main = function(){
//Carousel
//arrow-next
$('.arrow-next').click(function(e){
e.preventDefault(); //Added this
var currentSlide = $('.active-slide');
var nextSlide= currentSlide.next();
if(nextSlide.length === 0){
nextSlide = $('.slide').first();
}
currentSlide.fadeOut(600, function() { //Fixed spelling errors
$(this).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide'); //Fixed spelling errors
});
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if(nextDot.length === 0){
nextDot = $('.dot').first();
}
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
//Followed the same pattern for arrow-prev
//arrow-prev
$('.arrow-prev').click(function(e){
e.preventDefault();
var currentSlide = $('.active-slide');
var prevSlide= currentSlide.prev();
if(prevSlide.length === 0){
prevSlide = $('.slide').last();
}
currentSlide.fadeOut(600, function() {
$(this).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
});
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if(prevDot.length === 0){
prevDot = $('.dot').last();
}
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
};
$(document).ready(main);
Final product http://codepen.io/rkrc/pen/ogPaqM

Related

How do I change the shapes of the arrows from a carousel?

I am a beginner and want to know how to change the shape of the arrows from my carousel to look like the arrows from the w3schools example. How do I change it to that type of arrow, instead of a triangular arrow?
And if its change how do I also change the size of the arrow?
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow
let sliderImages = document.querySelectorAll(".slide"),
arrowLeft = document.querySelector("#arrow-left"),
arrowRight = document.querySelector("#arrow-right"),
current = 0;
//Clear all images
function reset() {
for (let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = "none";
}
}
// initialize slider
function startSlide() {
reset();
sliderImages[0].style.display = "block";
}
//show previous
function slideLeft() {
reset();
sliderImages[current - 1].style.display = "block";
current--;
}
//show next
function slideRight() {
reset();
sliderImages[current + 1].style.display = "block";
current++;
}
//left arrow click
arrowLeft.addEventListener("click", function () {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
//right arrow click
arrowRight.addEventListener("click", function () {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
});
startSlide();
#slider,
.wrap,
.slide-content {
max-width: 1000px;
position: relative;
margin: auto;
}
.wrap {
position: relative;
}
.slide-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.arrow {
cursor: pointer;
position: absolute;
top: 46%;
width: 0;
height: 0;
border-style: solid;
z-index: 1;
}
#arrow-left {
border-width: 30px 40px 30px 0;
border-color: transparent #cccccc transparent transparent;
left: 0;
}
#arrow-right {
border-width: 30px 0px 30px 40px;
border-color: transparent transparent transparent #cccccc;
right: 0;
}
/* Caption text */
.text {
position: relative;
color: #212529;
font-size: 18px;
top: 28px;
width: 100%;
text-align: center;
font-family: "Roboto Condensed", sans-serif;
font-weight: 400;
}
<main class="main">
<div class="wrap">
<div id="arrow-left" class="arrow"></div>
<div id="arrow-right" class="arrow"></div>
<div id="slider">
<div class="slide slide1">
<div class="slide-content">
<div id="container">
<img class="background-image" src="image1" alt="">
</div>
<div class="text">image1</div>
</div>
</div>
<div class="slide slide1">
<div class="slide-content">
<div id="container">
<img class="background-image" src="image2" alt="">
</div>
<div class="text">image2</div>
</div>
</div>
</div>
</div>
</main>

W3Schools is using ❯ for ❯ and ❮ for ❮. These are Unicode characters.
Since they are rendered as text you can size them with CSS font-size
let sliderImages = document.querySelectorAll(".slide"),
arrowLeft = document.querySelector("#arrow-left"),
arrowRight = document.querySelector("#arrow-right"),
current = 0;
//Clear all images
function reset() {
for (let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = "none";
}
}
// initialize slider
function startSlide() {
reset();
sliderImages[0].style.display = "block";
}
//show previous
function slideLeft() {
reset();
sliderImages[current - 1].style.display = "block";
current--;
}
//show next
function slideRight() {
reset();
sliderImages[current + 1].style.display = "block";
current++;
}
//left arrow click
arrowLeft.addEventListener("click", function () {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
//right arrow click
arrowRight.addEventListener("click", function () {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
});
startSlide();
#slider,
.wrap,
.slide-content {
max-width: 1000px;
position: relative;
margin: auto;
}
.wrap {
position: relative;
}
.slide-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.arrow {
cursor: pointer;
position: absolute;
top: 46%;
width: 30px; /* For your example code, make this match the font-size */
height: 30px; /* For your example code, make this match the font-size */
border-style: none;
z-index: 1;
font-size:30px; /* Change the arrow size here */
}
#arrow-left {
left: 0;
}
#arrow-right {
right: 0;
}
/* Caption text */
.text {
position: relative;
color: #212529;
font-size: 18px;
top: 28px;
width: 100%;
text-align: center;
font-family: "Roboto Condensed", sans-serif;
font-weight: 400;
}
<main class="main">
<div class="wrap">
<div id="arrow-left" class="arrow">❮</div>
<div id="arrow-right" class="arrow">❯</div>
<div id="slider">
<div class="slide slide1">
<div class="slide-content">
<div id="container">
<img class="background-image" src="image1" alt="">
</div>
<div class="text">image1</div>
</div>
</div>
<div class="slide slide1">
<div class="slide-content">
<div id="container">
<img class="background-image" src="image2" alt="">
</div>
<div class="text">image2</div>
</div>
</div>
</div>
</div>
</main>

W3Schools has used html symboles utf8 dingbats &#10094 and &#10095 inside links. If you want to change them you should use other codes from the table. You can change their size by changing their parent font size; in your case a tag.

jquery adds .active class to all elements when page is loaded

I'm creating a jquery webplayer.
My problem is when the page loads the song titles in the #playlist have a .active class. And further more the <div id="audio-info"> part displays data for all songs in the playlist.
But when I select a song from the playlist, everything is working as it should, the active song takes the .active class and the #audio-info only displays info for the active song.
I'm not sure why this is not working correctly when the page loads.
Can someone here take a look at the code and guide me?
The bug is probably around this chunk of code in the js $('#playlist li').removeClass('active');
element.addClass('active');
here is a snippet
$(document).ready(function() {
var audio;
//Hide pause
$('#pause').hide();
initAudio($('#playlist li:first-child'));
function initAudio(element) {
var song = element.attr('song');
var title = element.text();
var artist = element.attr('artist');
// Audio Object
audio = new Audio('media/' + song);
//insert audio info
$('.artist').text(artist);
$('.title').text(title);
console.log(audio);
$('#playlist li').removeClass('active');
element.addClass('active');
}
// play button
$('#play').click(function() {
audio.play();
$('#play').hide();
$('#pause').show();
showDuration();
});
//Pause button
$('#pause').click(function() {
audio.pause();
$('#play').show();
$('#pause').hide();
});
//Next button
$('#next').click(function() {
audio.pause();
var next = $('#playlist li.active').next();
if (next.length == 0) {
next = $('#playlist li:first-child');
}
initAudio(next);
audio.play();
showDuration();
});
$('#playlist li').click(function() {
audio.pause();
initAudio($(this));
$('#play').hide();
$('#pause').show();
audio.play();
showDuration();
});
//volume control
$('#volume').change(function() {
audio.volume = parseFloat(this.value / 100);
console.log(audio.volume);
});
//Time/showDuration
function showDuration() {
$(audio).bind('timeupdate', function() {
//Get Hours and minutes
var s = parseInt(audio.currentTime % 60);
var m = parseInt(audio.currentTime / 60) % 60;
if (s < 10) {
s = '0' + s;
}
$('#duration').html(m + ':' + s);
var value = 0;
if (audio.currentTime > 0) {
value = Math.floor((100 / audio.duration) * audio.currentTime);
}
$('#progress').css('width', value + '%');
});
};
var promise = audio.play();
if (promise !== undefined) {
promise.then(_ => {
// Autoplay started!
}).catch(error => {
// Autoplay was prevented.
// Show a "Play" button so that user can start playback.
});
}
});
/*************Player ******/
.clearfix {
clear: both;
}
.audio-player {
margin-top: 20px;
margin-bottom: 20px;
}
.progressbar-container {
display: inline-flex;
width: 100px;
margin: 0;
position: relative;
top: 7px;
}
.progress-bar {
background-color: #c2002d !important;
}
#audio-info {
text-align: center;
background-color: lightgrey;
color: #c2002d;
}
input#volume {
width: 95%;
margin-left: 2%;
-webkit-appearance: none !important;
background: #ccc;
height: 1px;
margin-bottom: 20px;
}
input#volume::-webkit-slider-thumb {
-webkit-appearance: none !important;
background: url(/uploads/images/player//knobred.png) no-repeat center center;
background-size: 10px 10px;
width: 10px;
height: 10px;
cursor: pointer;
}
#buttons {
width: 15%;
display: block;
/*margin: 15px auto;*/
/*margin-left: 23px;*/
/* overflow: auto;*/
}
button#play {
width: 20px;
height: 20px;
background: url(/uploads/images/player/play.svg) no-repeat center center;
background-size: 15px 15px;
border: none;
}
button#pause {
width: 20px;
height: 20px;
background: url(/uploads/images/player/pause.svg) no-repeat center center;
background-size: 15px 15px;
border: none;
}
/*button#prev{
width: 20px;
height: 20px;
background: url(../images/rev.svg) no-repeat center center;
background-size: 15px 15px;
}*/
#tracker {
position: relative;
width: 5%;
}
#playlist {
padding-inline-start: 0px !important;
}
#playlist li {
list-style: none;
cursor: pointer;
}
.active {
color: #c2002d;
}
#playlist>li>img {
height: 15px;
float: right;
margin-top: 5px;
cursor: pointer;
}
a>img {
height: 15px;
float: right;
margin-top: 5px;
cursor: pointer;
display: inline-block;
}
/*.info-dot{
height: 15px;
background: url(../images/player/info.svg) no-repeat center center;
cursor: pointer;
display: inline-block;
}*/
/************Player ends *********/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-9">
sfs
</div>
<div class="col-md-3">
<div class="audio-player">
<div id="audio-info">
<span class="artist"></span> - <span class="title"></span>
</div>
<input id="volume" type="range" min="0" max="100" value="50">
<br>
<div id="buttons">
<span>
<!-- <button id="prev"> </button> -->
<button id="play"></button>
<button id="pause"></button>
<!-- <button id="stop"></button>-->
<!-- <button id="next"> >> </button>-->
</span>
</div>
<div class="clearfix"></div>
<div id="tracker">
<div id="progress-bar" class="progress">
<span id="progress" class="progress-bar" role="progressbar"></span>
</div>
<span id="duration"></span>
</div>
<div class="clearfix"></div>
<ul id="playlist" class="hidden">
<div class="d-flex flex-row">
<div class="col-md-9">
<li class="active" song="somesong.mp3" cover="cover1.jpg" artist="someartist">somesong.mp3</li>
</div>
<div class="col-md-3">
<a data-toggle="popover" title="Popover Header" data-placement="left" data-content="Some content inside the popover">
<img src="/images/player/info.svg"></a>
</div>
</div>
<div class="d-flex flex-row">
<div class="col-md-9">
<li class="active" song="song2.mp3" cover="cover1.jpg" artist="someartist">song2.mp3</li>
</div>
<div class="col-md-3">
<a data-toggle="popover" title="Popover Header" data-placement="left" data-content="Some content inside the popover">
<img src="/images/player/info.svg"></a>
</div>
</div>
<div class="d-flex flex-row">
<div class="col-md-9">
<li class="active" song="song3.mp3" cover="cover1.jpg" artist="someartist">song3.mp3</li>
</div>
<div class="col-md-3">
<a data-toggle="popover" title="Popover Header" data-placement="left" data-content="Some content inside the popover">
<img src="/images/player/info.svg"></a>
</div>
</div>
</ul>
</div>
</div>
</div>
<!-- row -->
</div>
<!--Container -->

You currently use li:first-child, but since each li has a different parent, they are all first-child of their respective parents. Use #playlist > div:first-child li
$(document).ready(function() {
var audio;
//Hide pause
$('#pause').hide();
initAudio($('#playlist > div:first-child li'));
function initAudio(element) {
var song = element.attr('song');
var title = element.text();
var artist = element.attr('artist');
// Audio Object
audio = new Audio('media/' + song);
//insert audio info
$('.artist').text(artist);
$('.title').text(title);
console.log(audio);
$('#playlist li').removeClass('active');
element.addClass('active');
}
// play button
$('#play').click(function() {
audio.play();
$('#play').hide();
$('#pause').show();
showDuration();
});
//Pause button
$('#pause').click(function() {
audio.pause();
$('#play').show();
$('#pause').hide();
});
//Next button
$('#next').click(function() {
audio.pause();
var next = $('#playlist li.active').next();
if (next.length == 0) {
next = $('#playlist li:first-child');
}
initAudio(next);
audio.play();
showDuration();
});
$('#playlist li').click(function() {
audio.pause();
initAudio($(this));
$('#play').hide();
$('#pause').show();
audio.play();
showDuration();
});
//volume control
$('#volume').change(function() {
audio.volume = parseFloat(this.value / 100);
console.log(audio.volume);
});
//Time/showDuration
function showDuration() {
$(audio).bind('timeupdate', function() {
//Get Hours and minutes
var s = parseInt(audio.currentTime % 60);
var m = parseInt(audio.currentTime / 60) % 60;
if (s < 10) {
s = '0' + s;
}
$('#duration').html(m + ':' + s);
var value = 0;
if (audio.currentTime > 0) {
value = Math.floor((100 / audio.duration) * audio.currentTime);
}
$('#progress').css('width', value + '%');
});
};
var promise = audio.play();
if (promise !== undefined) {
promise.then(_ => {
// Autoplay started!
}).catch(error => {
// Autoplay was prevented.
// Show a "Play" button so that user can start playback.
});
}
});
/*************Player ******/
.clearfix {
clear: both;
}
.audio-player {
margin-top: 20px;
margin-bottom: 20px;
}
.progressbar-container {
display: inline-flex;
width: 100px;
margin: 0;
position: relative;
top: 7px;
}
.progress-bar {
background-color: #c2002d !important;
}
#audio-info {
text-align: center;
background-color: lightgrey;
color: #c2002d;
}
input#volume {
width: 95%;
margin-left: 2%;
-webkit-appearance: none !important;
background: #ccc;
height: 1px;
margin-bottom: 20px;
}
input#volume::-webkit-slider-thumb {
-webkit-appearance: none !important;
background: url(/uploads/images/player//knobred.png) no-repeat center center;
background-size: 10px 10px;
width: 10px;
height: 10px;
cursor: pointer;
}
#buttons {
width: 15%;
display: block;
/*margin: 15px auto;*/
/*margin-left: 23px;*/
/* overflow: auto;*/
}
button#play {
width: 20px;
height: 20px;
background: url(/uploads/images/player/play.svg) no-repeat center center;
background-size: 15px 15px;
border: none;
}
button#pause {
width: 20px;
height: 20px;
background: url(/uploads/images/player/pause.svg) no-repeat center center;
background-size: 15px 15px;
border: none;
}
/*button#prev{
width: 20px;
height: 20px;
background: url(../images/rev.svg) no-repeat center center;
background-size: 15px 15px;
}*/
#tracker {
position: relative;
width: 5%;
}
#playlist {
padding-inline-start: 0px !important;
}
#playlist li {
list-style: none;
cursor: pointer;
}
.active {
color: #c2002d;
}
#playlist>li>img {
height: 15px;
float: right;
margin-top: 5px;
cursor: pointer;
}
a>img {
height: 15px;
float: right;
margin-top: 5px;
cursor: pointer;
display: inline-block;
}
/*.info-dot{
height: 15px;
background: url(../images/player/info.svg) no-repeat center center;
cursor: pointer;
display: inline-block;
}*/
/************Player ends *********/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-9">
sfs
</div>
<div class="col-md-3">
<div class="audio-player">
<div id="audio-info">
<span class="artist"></span> - <span class="title"></span>
</div>
<input id="volume" type="range" min="0" max="100" value="50">
<br>
<div id="buttons">
<span>
<!-- <button id="prev"> </button> -->
<button id="play"></button>
<button id="pause"></button>
<!-- <button id="stop"></button>-->
<!-- <button id="next"> >> </button>-->
</span>
</div>
<div class="clearfix"></div>
<div id="tracker">
<div id="progress-bar" class="progress">
<span id="progress" class="progress-bar" role="progressbar"></span>
</div>
<span id="duration"></span>
</div>
<div class="clearfix"></div>
<ul id="playlist" class="hidden">
<div class="d-flex flex-row">
<div class="col-md-9">
<li class="active" song="somesong.mp3" cover="cover1.jpg" artist="someartist">somesong.mp3</li>
</div>
<div class="col-md-3">
<a data-toggle="popover" title="Popover Header" data-placement="left" data-content="Some content inside the popover">
<img src="/images/player/info.svg"></a>
</div>
</div>
<div class="d-flex flex-row">
<div class="col-md-9">
<li class="active" song="song2.mp3" cover="cover1.jpg" artist="someartist">song2.mp3</li>
</div>
<div class="col-md-3">
<a data-toggle="popover" title="Popover Header" data-placement="left" data-content="Some content inside the popover">
<img src="/images/player/info.svg"></a>
</div>
</div>
<div class="d-flex flex-row">
<div class="col-md-9">
<li class="active" song="song3.mp3" cover="cover1.jpg" artist="someartist">song3.mp3</li>
</div>
<div class="col-md-3">
<a data-toggle="popover" title="Popover Header" data-placement="left" data-content="Some content inside the popover">
<img src="/images/player/info.svg"></a>
</div>
</div>
</ul>
</div>
</div>
</div>
<!-- row -->
</div>
<!--Container -->

Image gallery in HTML with JS and CSS

I'm trying to make an image gallery with HTML, CSS and JS. The CSS works but there is a problem with the JS. I've made it so you can either click on an image or click on a button to see all of the images in order. But if I click on the third or fourth image and click the L button (stands for LEFT) it jumps from that image to the first image. For some reason it just doesn't want to show the second image.
I've been trying to fix this for hours and it still doesn't work as it should.
var num = 0;
function elementID(indexes) {
var index = $(".images").index(indexes);
var num = index;
}
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
expandImg.parentElement.style.display = "block";
}
function right() {
if (num >= document.getElementsByClassName('images').length - 1) {
num = document.getElementsByClassName('images').length - 1;
} else {
num++;
}
var expandImg2 = document.getElementById("expandedImg");
var image = document.getElementsByClassName('images')[num];
expandImg2.src = image.src;
}
function left() {
if (num <= 0) {
num++;
return false;
} else {
num--;
}
var expandImg2 = document.getElementById("expandedImg");
var image = document.getElementsByClassName('images')[num];
expandImg2.src = image.src;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
/* The grid: Four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container {
position: relative;
display: none;
}
/* Expanding image text */
#imgtext {
position: absolute;
bottom: 15px;
left: 15px;
color: white;
font-size: 20px;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="text-align:center">
<h2>Tabbed Image Gallery</h2>
<p><a onclick="left();" id="left">L</a> | <a onclick="right();" id="right">R</a>
</div>
<!-- The four columns -->
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/howto/img_nature.jpg" alt="Nature" style="width:100%" class="images" onclick="myFunction(this);elementID(this);">
</div>
<div class="column">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%" class="images" onclick="myFunction(this);elementID(this);">
</div>
<div class="column">
<img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%" class="images" onclick="myFunction(this);elementID(this);">
</div>
<div class="column">
<img src="https://www.w3schools.com/howto/img_lights.jpg" alt="Lights" style="width:100%" class="images" onclick="myFunction(this);elementID(this);">
</div>
</div>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%">
<div id="imgtext"></div>
</div>

Try this solution using the next() and prev() from jQuery.
var currentEl; // track current el
$(document).ready(() => {
$('.column').on('click', function() { // bind clicks
currentEl = this;
addImage($(this).find('img'));
});
$('.closebtn').on('click', function() { // bind clicks to close button
currentEl = undefined; // either you can do this to reset the flow, or comment to maintain the flow
});
});
function addImage(img) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = img[0].src;
expandImg.parentElement.style.display = "block";
}
function right() { // jump to next
var next = currentEl ? $(currentEl).next() : $('.column').first();
if (next.length > 0) {
addImage($(next).find('img'));
currentEl = next;
}
}
function left() { // jump to prev
var prev = currentEl ? $(currentEl).prev() : $('.column').first();
if (prev.length > 0) {
addImage($(prev).find('img'));
currentEl = prev;
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
/* The grid: Four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container {
position: relative;
display: none;
}
/* Expanding image text */
#imgtext {
position: absolute;
bottom: 15px;
left: 15px;
color: white;
font-size: 20px;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="text-align:center">
<h2>Tabbed Image Gallery</h2>
<p><a onclick="left();" id="left">L</a> | <a onclick="right();" id="right">R</a>
</div>
<!-- The four columns -->
<div class="row">
<div class="column">
<img src="https://www.w3schools.com/howto/img_nature.jpg" alt="Nature" style="width:100%" class="images">
</div>
<div class="column">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%" class="images">
</div>
<div class="column">
<img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%" class="images">
</div>
<div class="column">
<img src="https://www.w3schools.com/howto/img_lights.jpg" alt="Lights" style="width:100%" class="images">
</div>
</div>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%">
<div id="imgtext"></div>
</div>

Simple text slider in jQuery

I need help to do a simple text slider in jQuery or JavaScript.
I need a slider with animation so that the text moves from right to left.
Within my code I have also pagination, where I need highlight which text is active.
This is all of what I have, I need to be very simple.
All answers on the internet are so complicated.
Can someone help me?
.active{
color:red;
}
<div class="buttons">
<button name="prev">Prev</button>
<button name="next">Next</button>
</div>
<div class="content">
<div class="slide">
<p>content od slide</p>
</div>
<div class="slide">
<p>content od slide</p>
</div>
<div class="slide">
<p>content od slide</p>
</div>
</div>
<div class="paginator">
<div class="pagin-tracker">1</div>
<div class="pagin-tracker active">1</div>
<div class="pagin-tracker">1</div>
</div>

You can try this one.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.slider {
}
.slider__wrap {
overflow: hidden;
}
.slide {
width: 100%;
display: inline-block;
text-align: center;
}
.content {
will-change: transform;
white-space: nowrap;
transition: transform 0.3s;
}
</style>
</head>
<body>
<div id="slider" class="slider">
<div class="buttons">
<button name="prev">Prev</button>
<button name="next">Next</button>
</div>
<div class="slider__wrap">
<div class="content" style="transform: translate(-100%);" data-active="1"> <!-- if you need to set initial position to the second slider, or you can use translate(0) to set it to the first slide -->
<div class="slide">
<p>content od slide 1</p>
</div>
<div class="slide">
<p>content od slide 2</p>
</div>
<div class="slide">
<p>content od slide 3</p>
</div>
</div>
</div>
<div class="paginator">
<div class="pagin-tracker">1</div>
<div class="pagin-tracker active">1</div>
<div class="pagin-tracker">1</div>
</div>
</div>
<script>
const slider = document.getElementById('slider');
const sliderWrap = slider.querySelector('.slider__wrap');
const sliderContent = sliderWrap.querySelector('.content');
const sliderButtons = slider.querySelector('.buttons');
const buttonPrev = sliderButtons.querySelector('button[name="prev"]');
const buttonNext = sliderButtons.querySelector('button[name="next"]');
const pages = Array.from(slider.querySelectorAll('.pagin-tracker'));
const pagesCount = pages.length;
const slidesCount = sliderContent.querySelectorAll('.slide').length;
let activeIndex = sliderContent.getAttribute('data-active');
const updatePaginator = () => {
for (let i = 0; i < pagesCount; i++) {
pages[i].classList.remove('active');
}
if (pages[activeIndex]) {
pages[activeIndex].classList.add('active');
}
};
const applyStyle = () => {
sliderContent.setAttribute('data-active', activeIndex);
sliderContent.style.cssText = `transform: translate(-${activeIndex * 100}%);`;
updatePaginator();
};
buttonPrev.addEventListener('click', () => {
if (activeIndex > 0) {
activeIndex--;
applyStyle();
}
}, false);
buttonNext.addEventListener('click', () => {
if (activeIndex < slidesCount - 1) {
activeIndex++;
applyStyle();
}
}, false);
</script>
</body>
</html>

You can use something like this and extend as per you requirement.
https://codepen.io/anon/pen/MqRpKg
HTML
<div class="slide-wrap">
<div class="slide-mask">
<ul class="slide-group">
<li class="slide">this</li>
<li class="slide">is</li>
<li class="slide">a</li>
<li class="slide">simple</li>
<li class="slide">slider</li>
</ul>
</div>
<div class="slider-nav">
<ul></ul>
</div>
</div>
JQuery:
var $slide = $('.slide'),
$slideGroup = $('.slide-group'),
$bullet = $('.bullet')
var slidesTotal = ($slide.length - 1),
current = 0,
isAutoSliding = true;
$bullet.first().addClass('current');
var clickSlide = function() {
//stop auto sliding
window.clearInterval(autoSlide);
isAutoSliding = false;
var slideIndex = $bullet.index($(this));
updateIndex(slideIndex);
};
var updateIndex = function(currentSlide) {
if(isAutoSliding) {
if(current === slidesTotal) {
current = 0;
} else {
current++;
}
} else {
current = currentSlide;
}
$bullet.removeClass('current');
$bullet.eq(current).addClass('current');
transition(current);
};
var transition = function(slidePosition) {
var slidePositionNew = (slidePosition ) * 500;
$slideGroup.animate({
'left': '-' + slidePositionNew + 'px'
});
};
var autoSlide = window.setInterval(updateIndex, 2000);
$( "li.slide" ).each(function( index ) {
$('.slider-nav').append('<span class="bullet">'+index+'</span>');
});
var $bullet = $('.bullet');
$bullet.on( 'click', clickSlide);
CSS
body {
background: rgb(191, 76, 76);
}
/* slider
----------------------*/
.slide-wrap {
margin: 5% auto 0;
width: 540px;
}
.slide-mask {
position: relative;
overflow: hidden;
height: 100px;
}
.slide-group {
position: absolute;
top: 0px;
left: 0;
}
.slide {
display:inline-block;
height: 100px;
width:500px;
font: 100 90px/135px "lato";
font-size: 2em;
color: #fff;
text-align: center;
text-transform: uppercase;
}
/* nav
----------------------*/
.slide-nav {
text-align: center;
border: 1px solid red;
height: 30px;
color: red;
}
.slide-nav ul {
margin: 0;
padding: 0;
}
.slide-nav li {
border: 1px solid red;
width: 100px;
cursor: pointer;
color: red;
}
.slide-nav li.current {
background: rgb(144, 39, 39);
}
.slider-nav {
width: 300px;
text-alignt: center;
margin-left:40%;
}
span.bullet {
display:inline-block;
width: 30px;
cursor: pointer;
}

jQuery CSS - Slider swipe animation

UPDATE: Updated the code and added a better example to clearify what I want to achieve.
I have built a slider with jQuery.
I give each element the class .active which displays the hidden elements.
Now I want a swipe animation, so that the images come from left to right.
The problem is that I already have a complex code and I don't know how to achieve that.
Here is an example what I want to achieve: https://bootsnipp.com/snippets/Padax
Here is the code
https://codepen.io/Insane415/pen/NggLxe
<div class="slider">
<div class="row">
<div class="col-md-4">
<div class="image-holder">
<img src="http://via.placeholder.com/350x150" style="display:none;" class="active">
<img src="http://via.placeholder.com/350x150" style="display:none;">
<img src="http://via.placeholder.com/350x150" style="display:none;">
<img src="http://via.placeholder.com/350x150" style="display:none;">
</div>
<div class="bullet-points">
•
•
•
•
</div>
</div>
<div class="col-md-2">
<div class="thumbnails">
<img src="http://via.placeholder.com/350x150" class="active-thumbnail">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
</div>
</div>
<div class="col-md-6 center-me" style="height:100%;">
<div class="text-holder">
<div class="text active">
<p>Lorem Ipsum</p>
<h2>Giant Heading 1</h2>
<p>Just some more text</p>
zur Preisübersicht
</div>
<div class="text">
<p>Lorem Ipsum</p>
<h2>Giant Heading 2</h2>
<p>Some more text</p>
zur Preisübersicht
</div>
<div class="text">
<p>Lorem Ipsum</p>
<h2>Giant Heading 3</h2>
<p>Some more text</p>
zur Preisübersicht
</div>
<div class="text">
<p>Lorem Ipsum</p>
<h2>Giant Heading 4</h2>
<p>Some more text</p>
zur Preisübersicht
</div>
</div>
</div>
</div>
.text-holder .text p{margin: 0!important;}
.slider{
padding: 15px;
margin-top: 50px;
background: url('/images/content/slider/Banner_Hintergrund_telbes-01.jpg');
background-repeat: no-repeat!important;
background-size: cover!important;
display: inline-block;
width: 100%;
border: 1px solid #ddd;
}
.slider .bullet-points a{
color: #ccc;
}
.thumbnails{
height: 195.11px;
margin-left: -25px;
}
.thumbnails img{
display:block;
max-height: 31.65%;
margin-bottom: 5px;
}
.thumbnails img:hover{
cursor: pointer;
}
.text-holder{
margin-left: 0px;
height: 100%;
}
.text-holder .text{
display: none;
}
/*display active image*/
.active{
display: block!important;
}
/*hide thumbnail when image is active*/
.active-thumbnail{
display: none!important;
}
.bullet-points{
display: block;
text-align: center;
margin-top: 15px;
}
.bullet-points a{
font-size: 40px;
text-decoration: none;
color: #ccc;
}
.active-bullet{
color: #E22C26!important;
}
/*.image-holder{
max-width: 350px!important;
}
.image-holder img{
max-width: 350px!important;
}*/
.image-holder img{
/* text-align: center!important; */
margin: 0 auto;
}
.bullet-points a:hover{
color: #E22C26!important;
}
.center-me{
margin-top: 4%;
}
.text-holder a{
margin-top: 15px;
padding: 10px 20px 10px 20px;
}
.text-holder a:hover{
padding:10px 20px 10px 20px;
}
.text-holder{
font-size: 130%;
color: inherit;
}
.text-holder h2{
font-size: 200%;
}
$(document).ready(function() {
var images = [$(".image-holder img:first-child"), $(".image-holder img:nth-of-type(2)"), $(".image-holder img:nth-of-type(3)"), $(".image-holder img:last-child")];
var thumbnails = [$(".thumbnails img:first-child"), $(".thumbnails img:nth-of-type(2)"), $(".thumbnails img:nth-of-type(3)"), $(".thumbnails img:last-child")];
var text = [$(".text-holder .text:first-child"), $(".text-holder .text:nth-of-type(2)"), $(".text-holder .text:nth-of-type(3)"), $(".text-holder .text:last-child")];
var backgrounds = ["url('/images/content/slider/Banner_Hintergrund_telbes-01.jpg')", "url('/images/content/slider/Banner_Hintergrund_telbes-02.jpg')", "url('/images/content/slider/Banner_Hintergrund_telbes-03.jpg')", "url('/images/content/slider/Banner_Hintergrund_telbes-04.jpg')"];
var bullets = [$(".bullet-points a:first-child"), $(".bullet-points a:nth-of-type(2)"), $(".bullet-points a:nth-of-type(3)"), $(".bullet-points a:last-child")];
var i = 1;
var currentSlide = 1;
var time = 3000;
var sliderTimer = setInterval(slider, time);
// slider navigation
$('.bullet-points a, .thumbnails img').click(function(e) {
e.preventDefault();
var pos = $(this).index();
clearInterval(sliderTimer); // stop auto slideshow
sliderTimer = false;
slider(pos);
});
function slider(pos) {
currentSlide = i;
if (typeof(pos) !== 'undefined') {
i = pos;
images[currentSlide - 1].removeClass("active").addClass('transition');
text[currentSlide - 1].removeClass("active");
thumbnails[currentSlide - 1].removeClass("active-thumbnail");
bullets[currentSlide - 1].removeClass("active-bullet");
}
if (i != 0) {
images[i - 1].removeClass("active").addClass('transition');
text[i - 1].removeClass("active");
thumbnails[i - 1].removeClass("active-thumbnail");
bullets[i - 1].removeClass("active-bullet");
}
if (i == images.length) { i = 0 }
images[i].addClass("active");
setTimeout(function() {
$(".image-holder img").removeClass('transition');
},1000);
text[i].addClass("active");
thumbnails[i].addClass("active-thumbnail");
bullets[i].addClass("active-bullet");
i++;
if (!sliderTimer) {
sliderTimer = setInterval(slider, time); // start auto slideshow
}
}
});

You can do something like this using using CSS3,
Give each image an absolute position and give each image a width & height value.
Set the image container height so your slider pager sit below the images.
I use both #keyframes and transition to demonstrate how you can achieve the effect.
And in your javascript slider function, I added a function to add and remove the transition.
$(document).ready(function() {
var images = [$(".image-holder img:first-child"), $(".image-holder img:nth-of-type(2)"), $(".image-holder img:nth-of-type(3)"), $(".image-holder img:last-child")];
var thumbnails = [$(".thumbnails img:first-child"), $(".thumbnails img:nth-of-type(2)"), $(".thumbnails img:nth-of-type(3)"), $(".thumbnails img:last-child")];
var text = [$(".text-holder .text:first-child"), $(".text-holder .text:nth-of-type(2)"), $(".text-holder .text:nth-of-type(3)"), $(".text-holder .text:last-child")];
var bullets = [$(".bullet-points a:first-child"), $(".bullet-points a:nth-of-type(2)"), $(".bullet-points a:nth-of-type(3)"), $(".bullet-points a:last-child")];
var i = 1;
var currentSlide = 1;
var time = 3000;
var sliderTimer = setInterval(slider, time);
// slider navigation
$('.bullet-points a, .thumbnails img').click(function(e) {
e.preventDefault();
var pos = $(this).index();
clearInterval(sliderTimer); // stop auto slideshow
sliderTimer = false;
slider(pos);
});
function slider(pos) {
currentSlide = i;
if (typeof(pos) !== 'undefined') {
i = pos;
images[currentSlide - 1].removeClass("active").addClass('transition');
text[currentSlide - 1].removeClass("active");
thumbnails[currentSlide - 1].removeClass("active-thumbnail");
bullets[currentSlide - 1].removeClass("active-bullet");
}
if (i != 0) {
images[i - 1].removeClass("active").addClass('transition');
text[i - 1].removeClass("active");
thumbnails[i - 1].removeClass("active-thumbnail");
bullets[i - 1].removeClass("active-bullet");
}
if (i == images.length) { i = 0 }
images[i].addClass("active");
setTimeout(function() {
$(".image-holder img").removeClass('transition');
},1000);
text[i].addClass("active");
thumbnails[i].addClass("active-thumbnail");
bullets[i].addClass("active-bullet");
i++;
if (!sliderTimer) {
sliderTimer = setInterval(slider, time); // start auto slideshow
}
}
});
/*how I could allign the images in one row*/
.image-holder {
display: inline-block;
width: 100%;
height: 220px;
}
.image-holder img {
display: block;
width: 200px;
height: 200px;
margin: 0;
opacity: 0;
top: 0;
left: 100%;
transition: left ease 1s;
position: absolute;
}
.image-holder img.transition {
animation: moveSlider ease 2s;
opacity: 1;
}
#keyframes moveSlider {
0% {
left: 50%;
}
50% {
left: -100%;
}
100% {
opacity: 0;
left: 100%;
}
}
.image-holder img.active {
left: 50%;
transform: translateX(-50%);
opacity: 1;
}
/*END image row allignment*/
.text-holder p{margin: 0;}
.slider{
padding:15px;
margin-top: 50px;
/*background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTHzNrZnq-4-FItozqSu2ZWCBXW4LjWKTlkOOgDlZFj-JtdTuclVQ');*/
background-color: blue;
background-repeat: no-repeat;
background-size: 100% 100%;
display: inline-block;
width: 100%;
}
.thumbnails {
height: 100%;
}
.thumbnails img {
width: 100%;
height: auto;
display: block;
margin-bottom: 5px;
}
.thumbnails img:hover{
cursor: pointer;
}
.text-holder .text {
display: none;
}
.text-holder .text.active {
display: block;
}
/*display active image*/
.active {
}
.active-bullet{
color: #E22C26!important;
}
/*hide thumbnail when image is active*/
.active-thumbnail{
display: none!important;
}
.bullet-points{
display: block;
text-align: center;
}
.bullet-points a{
font-size: 40px;
text-decoration: none;
color: #ccc;
}
.bullet-points a:hover{
color: #E22C26!important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<div class="row">
<div class="col-md-4">
<div class="image-holder">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993474/money_gsliha.jpg" class="active">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993472/rap_zduqat.jpg">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993471/rauch_oikfed.jpg">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993471/girls_x07ay8.jpg">
</div>
<div class="bullet-points">
•
•
•
•
</div>
</div>
<div class="col-md-1">
<div class="thumbnails">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993474/money_gsliha.jpg" class="active-thumbnail">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993472/rap_zduqat.jpg">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993471/rauch_oikfed.jpg">
<img src="https://res.cloudinary.com/somestuff/image/upload/v1497993471/girls_x07ay8.jpg">
</div>
</div>
<div class="col-md-7">
<div class="text-holder">
<div class="text active">
<p>Lorem Ipsum</p>
<h1>Giant Heading 1</h1>
<p>Some more text</p>
</div>
<div class="text">
<p>Lorem Ipsum</p>
<h1>Giant Heading 2</h1>
<p>Some more text</p>
</div>
<div class="text">
<p>Lorem Ipsum</p>
<h1>Giant Heading 3</h1>
<p>Some more text</p>
</div>
<div class="text">
<p>Lorem Ipsum</p>
<h1>Giant Heading 4</h1>
<p>Some more text</p>
</div>
</div>
</div>
</div>
</div>

Categories