Wrap a div dynamically using jQuery depending on screen size - javascript

I have a bootstrap carousel. Here if window width i more than 400px, I need to show all inner divs in same item. But if the window width is less than 400px, I need to show every 3 inner divs in
one <div class="item">. I have this code:
function item_wrap() {
var width = $(window).width();
console.log(width);
if (width > 400) {
$('.inner').unwrap();
$('.inner').wrapAll('<div class="item active">');
} else {
$('.inner').unwrap();
$('.inner:lt(3)').wrapAll('<div class="item active">');
$('.inner:gt(2)').wrapAll('<div class="item">');
}
}
item_wrap();
$(window).resize(function() {
item_wrap();
});
.item {
background: #ccc;
}
.active {
color: red
}
.inner {
float: left;
width: 20%;
border: 1px solid black;
margin: 2px;
}
#media screen and (max-width: 400px) and (min-width: 300px) {
.inner {
width: 30%;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div id="myCarousel" class="carousel" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div>
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
<div class="inner">5</div>
<div class="inner">6</div>
<div class="inner">7</div>
<div class="inner">8</div>
<div class="inner">9</div>
<div class="inner">10</div>
<div class="inner">11</div>
<div class="inner">12</div>
</div>
</div>
<a class="carousel-control left-carousel" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true" style="display:block"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control right-carousel" href="#myCarousel" role="button" data-slide="next" style="background: inherit !important;display: block;height: auto;opacity: 0.5;right: -4%;">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
If window width is greater than 400px it is working correctly. But if the window width is less than 400px the first 3 inner divs are showing correct
but other inner div are not correctly wrappped in <div class="item">
what i need is if in window width less than 400px then first 3 inner
div is need wrap in <div class="item active"> and all other ecah 3
inner div is need to wrap in <div class="item">.
ie , if window width less than 400px i need to get the following structure
<div class="carousel-inner" role="listbox">
<div>
<div class="item-active">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
<div class="item">
<div class="inner">4</div>
<div class="inner">5</div>
<div class="inner">6</div>
</div>
<div class="item">
<div class="inner">7</div>
<div class="inner">8</div>
<div class="inner">9</div>
</div>
<div class="item">
<div class="inner">10</div>
<div class="inner">11</div>
<div class="inner">12</div>
</div>
</div>
</div>
Please help to solve this .


Try this
<script type="text/javascript">
function item_wrap(){
var width = $(window).width();
console.log(width);
if(width > 400) {
$('.inner').unwrap();
$('.inner').wrapAll('<div class="item active">');
} else {
$('.inner').unwrap();
var divs = $(".inner");
for(var i = 0; i < divs.length; i+=3) {
if(i===0){
$('.inner:lt(3)').wrapAll('<div class="item active">');
}
else{
divs.slice(i, i+3).wrapAll("<div class='item'></div>");
}
}
}
}
item_wrap();
$(window).resize(function(){
item_wrap();
});
</script>


Idea
Here's the code that works. The idea is that you loop through the remaining items after the first three, taking three items at a time, and wrap them into the div. Then take the next three and wrap them again, and so forth.
Main code:
for (var i = 0; i < others.length; i += 3) {
var nextThree = [others[i], others[i+1], others[i+2]]'
$(nextThree).wrapAll('<div class="item">');
}
Full code:
function item_wrap() {
var width = $(window).width();
console.log(width);
if (width > 400) {
$('.inner').unwrap();
$('.inner').wrapAll('<div class="item active">');
} else {
$('.inner').unwrap();
var firstThree = $('.inner:lt(3)');
var others = $('.inner:gt(2)');
$(firstThree).wrapAll('<div class="item active">');
for (var i = 0; i < others.length; i += 3) {
var nextThree = [others[i], others[i+1], others[i+2]]'
$(nextThree).wrapAll('<div class="item">');
}
}
}
item_wrap();
$(window).resize(function() {
item_wrap();
});
.item {
background: #ccc;
}
.active {
color: red
}
.inner {
float: left;
width: 20%;
border: 1px solid black;
margin: 2px;
}
#media screen and (max-width: 400px) and (min-width: 300px) {
.inner {
width: 30%;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div id="myCarousel" class="carousel" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div>
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
<div class="inner">5</div>
<div class="inner">6</div>
<div class="inner">7</div>
<div class="inner">8</div>
<div class="inner">9</div>
<div class="inner">10</div>
<div class="inner">11</div>
<div class="inner">12</div>
</div>
</div>
<a class="carousel-control left-carousel" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true" style="display:block"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control right-carousel" href="#myCarousel" role="button" data-slide="next" style="background: inherit !important;display: block;height: auto;opacity: 0.5;right: -4%;">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>

Related

Customized Bootstrap Carousel - only show set number of DIVs

I have implemented a bootstrap carousel which looks like this on loading:
The code is as follows:
html:
<div class="container text-center my-3">
<div class="row mx-auto my-auto">
<div id="recipeCarousel" class="carousel slide w-100" data-wrap="false">
<div class="carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<div class="col-md-1">
<div class="card card-body">
1
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-1">
<div class="card card-body">
2
</div>
</div>
</div>
... carousel-item divs repeat to 18 ...
<div class="carousel-item">
<div class="col-md-1">
<div class="card card-body">
18
</div>
</div>
</div>
</div>
<a class="carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
Javascript:
$('.carousel .carousel-item').each(function () {
var minPerSlide = 12;
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < minPerSlide; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
CSS:
#media (max-width: 768px) {
.carousel-inner .carousel-item > div {
display: block;
}
.carousel-inner .carousel-item > div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
/* display 12 */
#media (min-width: 768px) {
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(8.333%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-8.333%);
}
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
transform: translateX(0);
}
I don't want to the carousel to repeat when I get to the end (clicking the right arrow 6 times):
However it seems I can continue clicking the right arrow until the 18 is the first div in the row:
I cannot figure out how to stop the right button from carrying out a move when the last (18) div first appears on screen (i.e. the second screenshot above).
Any help is greatly appreciated or if anything isn't clear please let me know.

So I managed to find the event that fires 'after' a slide completes and this is where I needed to handle the changes. Also, making use of the current Active attribute that gets auto-assigned to the current WeatherElement. Code working now looks like this:
html:
<div class="container text-center my-3">
<div class="row mx-auto my-auto">
<div id="recipeCarousel" class="carousel slide w-100" data-wrap="false">
<div class="carousel-inner carousel-weather w-100" role="listbox">
<div id="weatherCard_0" class="carousel-item active">
<div class="col-md-1">
<div class="card card-body">
1
</div>
</div>
</div>
... repeat till 18
<div id="weatherCard_18" class="carousel-item">
<div class="col-md-1">
<div class="card card-body">
18
</div>
</div>
</div>
</div>
<a id="leftWeatherButton" class="carousel-control carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a id="rightWeatherButton" class="carousel-control carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
Where I have removed the onClick() events from the buttons.
Jaascript:
$('#recipeCarousel').bind('slid.bs.carousel', function (e) {
var $this = $(this);
$this.children('.carousel-control').show();
var weatherElements = $('.carousel-weather')[0].children;
var elementsLength = weatherElements.length - 1;
var first = weatherElements[0];
var lastCount;
if (elementsLength <= 11) {
lastCount = 0
}
else {
lastCount = elementsLength - 11;
}
var last = weatherElements[lastCount];
if ($(last).hasClass('active')) {
$this.children('.carousel-control-next').hide();
} else if ($(first).hasClass('active')) {
$this.children('.carousel-control-prev').hide();
}
});
function ManageWeatherButtons() {
$("#leftWeatherButton").hide();
$("#rightWeatherButton").hide();
debugger;
if (weatherCards.length > 12) {
$("#rightWeatherButton").show();
}
}
Which replaces all of the javascript from the initial code example.
This seems to work a lot better and will behave no matter how much you click the buttons.

Add class to div when with same id and display block using jquery

Trying to add .active class on .inner-thumb-container whenever its corresponding .detail-box is set to display: block. I have two blocks using similar code so that layout is modified on mobile and desktop views.
Here's what I have so far. Works fine until window is resized...
jQuery:
// show different div based on image map hover
jQuery("#career-img-wrap a[data-toggle]").click(function(e) {
e.preventDefault();
var selector = $(this).data("toggle");
jQuery(".inner-thumb-container").removeClass('active');
jQuery(this).find(".inner-thumb-container").addClass('active');
jQuery(".detail-box").hide();
jQuery(".detail-box" + "#" + selector).show().addClass('animated fadeIn');
});
HTML (written in ExpressionEngine):
<div class="mobile-hide">
<div class="row">
<div class="col-md-6 text-center thumb-container">
{careers_benefits}
{careers_benefits:switch="<div class='row'>|"}
<div class="col-md-6" id="career-img-wrap">
<a href="#" data-toggle="career_content_{careers_benefits:field_row_count}">
<div class="inner-thumb-container {if careers_benefits:field_row_count == 1}active{/if}">
<img src="{careers_benefits:icon}" alt="{careers_benefits:title} icon">
<p>{careers_benefits:title}</p>
</div>
</a>
</div>
{if careers_benefits:field_row_count != careers_benefits:field_total_rows}{careers_benefits:switch="|</div>"}{/if}
{if careers_benefits:field_row_count == careers_benefits:field_total_rows}</div>{/if}
{/careers_benefits}
</div>
{careers_benefits}
<div class="col-md-6 career-thumb-content detail-box" id="career_content_{careers_benefits:field_row_count}">
<div class="career-thumb-content-inner">
<h3>{careers_benefits:title}</h3>
{careers_benefits:content}
</div>
</div>
{/careers_benefits}
</div>
</div>
<div class="mobile-show">
<div class="row">
<div class="col-md-12 text-center thumb-container">
{careers_benefits}
<div id="career-img-wrap">
<a href="#" data-toggle="career_content_{careers_benefits:field_row_count}">
<div class="inner-thumb-container">
<img src="{careers_benefits:icon}" alt="{careers_benefits:title} icon">
<p>{careers_benefits:title}</p>
</div>
</a>
</div>
<div class="career-thumb-content detail-box" id="career_content_{careers_benefits:field_row_count}">
<div class="career-thumb-content-inner">
<h3>{careers_benefits:title}</h3>
{careers_benefits:content}
</div>
</div>
{/careers_benefits}
</div>
</div>
</div>
CSS:
.mobile-hide {
display: block;
}
.mobile-show {
display: none;
}
#media (max-width: 992px){
.mobile-hide {
display: none;
}
.mobile-show {
display: block;
}

Card flip inside Bootstrap modal with dynamicly imported image

I'm making a sort of card game. I'm using Bootstrap 3 as my framework with a deck of cards in a grid, each card in their own column.
When a card is clicked, I want the card to be displayed with its backside up as an overlay, like Bootstraps modal or equivalent. But when the card is clicked (or touched) it should flip, displaying the front which is the same as the image that was clicked to trigger the modal. It should be able to flip back and forward infinite number of times. Clicking outside the modal or on a close button, closes the modal and returns to the deck.
I'm able to do a card flip on an image. And I'm able to trigger a modal with dynamic content. But what I can't figure out is how to do this together so that I don't have to create a seperate modal for each card.
I've been pulling my hair over this issue for days now and I truly cannot wrap my head around how this can be made. My javascript skills are quite limited and I cant find any plugin or code example to help me in this (I've tried numerous options).
My grid is displayed in the snippet. No data-targets, modules or javascripts included though since I havn't found anything that works yet.
Any ideas?
main {
.container-fluid;
.text-center;
background: none;
header {
.container-fluid;
.text-center;
padding: 50px;
h1 {
font-weight: #font-weight-heading;
}
}
.cardColumns {
.make-row();
.cCard {
.make-xs-column(4);
.make-sm-column(3);
.make-md-column(2);
padding: 10px;
img {
width: 100%;
height: auto;
.img-rounded;
modal-body-shadow: 0 4px 8px 0 #000;
transition: 0.3s;
}
img:hover {
modal-body-shadow: 0 8px 16px 0 #000;
}
}
}
}
<main>
<div class="cardColumns">
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
<div class="cCard">
<a href="#">
<img src="img/card.jpg" alt="Perspiciatis">
</a>
</div>
</div>
</main>

This basically just changes the background image in the mid spin.
$(document).ready(function() {
initListeners();
});
function initListeners() {
$(".container").off();
$(".container").on("click",function() {
$(".container").removeClass("toggle")
$(this).addClass("toggle");
});
}
/*var Cards;
setTimeout(function() {
Cards = document.querySelectorAll(".container");
for (let i = 0; i < (e = Cards.length); i++)
Cards[i].addEventListener("click", function(elem) {
for (let i = 0; i < (e = Cards.length); i++)
Cards[i].classList.remove('toggle');
elem.target.parentElement.classList.add('toggle');
});
}, 1);*/
.container {
perspective: 1000px;
display: inline-block;
position: relative;
}
.card {
margin: 5px;
width: 105px;
height: 150px;
background: #000;
transition: transform .35s linear;
transform: rotateX(180deg);
transform-style: preserve-3d;
}
.card::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://i.stack.imgur.com/gcRWf.png) center center;
background-size: cover!important;
transition: background 0.01s linear;
transition-delay: 0.175s;
}
.container.toggle .card {
transform: rotateX(0deg);
}
.container.toggle .card::after {
background: url(https://s-media-cache-ak0.pinimg.com/736x/f4/e3/97/f4e397ef5e0a4cd7cdbf30e65aa149c0.jpg) center center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>
<div class="container">
<div class="card"></div>
</div>

Copy pest code in individual file and check in your local it will run. perfect. Given below is modern way of doing it. You can refer this link for further details of the way of creating modal dynamically.
With that also i have used external js to flip images reference to which you will get here.
$('.flip-card').flip();
function openModal(front_image, back_image) {
var message = $('#modal_1');
BootstrapDialog.show({
message: $('#modal_1'),
onshown: function() {
$('.front img').attr('src', front_image);
$('.back img').attr('src', back_image);
},
onhide: function(dialogRef) {
$('#hidden-div').append(message);
},
});
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<button type="button" class="btn btn-primary" onclick="openModal('http://fillmurray.com/200/200','http://fillmurray.com/600/600')">Open modal</button>
<div id="hidden-div" style="display: none">
<div class="container-fluid" id="modal_1">
<div class="row">
<div class="col-sm-3 col-xs-6">
<div class="flip-card" ontouchstart="this.classList.toggle('hover');" style="height : 300px;">
<div class="front front-side" style="">
<img src="" alt="" style="width : 100%; height: 100%">
</div>
<div class="back back-side" style="background-color : blue">
<img src="" alt="" style="width : 100%; height: 100%">
</div>
</div>
</div>
</div>
</div>
</div>

Simulate button click with delay

I have a function that switches between 3 divs when one of 3 buttons is clicked (each button is linked to each div). But I also need that function to click each button automatically with 4 seconds delay. I want to achieve something like a slider that switches between those 3 divs automatically but the divs can also be switched by buttons. Is it possible to do? If so, how to do that? I'm a total jQuery / javascript beginner and I have no idea how to make it work.
Code attached below.
$(document).ready(function() {
$('#button_slide1').trigger('click');
$('.btn a').on('click', function(e) {
e.preventDefault();
//figure out which slide to show
var slideToShow = $(this).attr('rel');
//hide current slide
$('#header .slides.active').removeClass('active')
$('#' + slideToShow).addClass('active');
//show new slide
});
});
.slides:not(.active) {
display: none;
}
.btn {
float: left;
margin: 5px;
}
.btn p {
padding: 0;
margin: 0;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="header">
<div class="slides active" id="slide1">
<img src="http://placehold.it/400x150/?text=Slide1">
</div>
<div class="slides" id="slide2">
<img src="http://placehold.it/400x150/?text=Slide2">
</div>
<div class="slides" id="slide3">
<img src="http://placehold.it/400x150/?text=Slide3">
</div>
<div class="buttons-wrapper">
<div class="btn">
<a href="http://facebook.com" rel="slide1">
<img src="http://placehold.it/70x25/" alt="typo-icon">
<p class="paragraph button-red">S1</p>
</a>
</div>
<div class="btn">
<a href="http://facebook.com" rel="slide2">
<img src="http://placehold.it/70x25/" alt="rwd-icon">
<p class="paragraph button-blue">S2</p>
</a>
</div>
<div class="btn">
<a href="http://facebook.com" rel="slide3">
<img src="http://placehold.it/70x25/" alt="ux-icon">
<p class="paragraph button-green">S3</p>
</a>
</div>
</div>
</section>

This should get you well along your way.
<style>
.toggleDiv {
display: none;
}
.toggleDiv.active {
display: block;
}
</style>
<div id="div1" class="toggleDiv">
<span>I'm div #1</span>
</div>
<div id="div2" class="toggleDiv">
<span>I'm div #2</span>
</div>
<div id="div3" class="toggleDiv">
<span>I'm div #3</span>
</div>
<button type="button" onClick="slides.toggle(0)">Toggle 1</button>
<button type="button" onClick="slides.toggle(1)">Toggle 2</button>
<button type="button" onClick="slides.toggle(2)">Toggle 3</button>
<script>
var slides = [
document.getElementById("div1"),
document.getElementById("div2"),
document.getElementById("div3")
];
function Slides(slides, active) {
this.slides = slides;
this.activeIndex = active === 0 ? 0 : active === null ? null : active || null;
this.slidesCount = this.slides.length;
this.toggle = function(index) {
if (this.activeIndex === index) {
return this.close(index);
}
return this.open(index);
};
this.open = function(index) {
this.activeIndex = index;
let i;
for (i = 0; i < this.slidesCount; i++) {
if (this.activeIndex !== i) {
this.slides[i].classList.remove("active");
}
}
return this.slides[index].classList.add("active");
};
this.close = function(index) {
this.activeIndex = null;
return this.slides[index].classList.remove("active");
};
console.log(this.activeIndex)
if (this.activeIndex !== null) {
this.slides[this.activeIndex].classList.add("active");
}
}
var slides = new Slides(slides, 0);
</script>

You need to set an interval using javascript:
var inx=0, // the button index that must be clicked
totalButtons = $('.buttons-wrapper').find('div.btn').length; // total number of buttons
var myInterval = setInterval(clickButton, 4000); // name of the function that needs to be triggered, time interval in miliseconds
function clickButton() {
if (inx >= totalButtons) // check for out of index
inx = 0;
$('.buttons-wrapper').find('.btn').eq(inx).find('a').first().trigger('click');
inx=inx+1; // adding one unit to the index
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="header">
<div class="slides active" id="slide1">
<img src="http://placehold.it/400x150/?text=Slide1">
</div>
<div class="slides" id="slide2">
<img src="http://placehold.it/400x150/?text=Slide2">
</div>
<div class="slides" id="slide3">
<img src="http://placehold.it/400x150/?text=Slide3">
</div>
<div class="buttons-wrapper">
<div class="btn">
<a href="http://facebook.com" rel="slide1" onclick="console.log(this.getAttribute('rel'))">
<img src="http://placehold.it/70x25/" alt="typo-icon">
<p class="paragraph button-red">S1</p>
</a>
</div>
<div class="btn">
<a href="http://facebook.com" rel="slide2" onclick="console.log(this.getAttribute('rel'))">
<img src="http://placehold.it/70x25/" alt="rwd-icon">
<p class="paragraph button-blue">S2</p>
</a>
</div>
<div class="btn">
<a href="http://facebook.com" rel="slide3" onclick="console.log(this.getAttribute('rel'))">
<img src="http://placehold.it/70x25/" alt="ux-icon">
<p class="paragraph button-green">S3</p>
</a>
</div>
</div>
</section>

https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/
You can edit this example according to your need
$(document).ready(function() {
$("#slideshow > div:gt(0)").hide();
$('.btn').one("click", function(e) {
e.preventDefault();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
});
.btn {
float: left;
margin: 5px;
}
.btn p {
padding: 0;
margin: 0;
text-align: center;
}
#slideshow > div {
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="header">
<div id="slideshow">
<div class="slides active" id="slide1">
<img src="http://placehold.it/400x150/?text=Slide1">
</div>
<div class="slides" id="slide2">
<img src="http://placehold.it/400x150/?text=Slide2">
</div>
<div class="slides" id="slide3">
<img src="http://placehold.it/400x150/?text=Slide3">
</div>
</div>
<div class="buttons-wrapper">
<div class="btn">
<a href="http://facebook.com" >
<img src="http://placehold.it/70x25/" alt="typo-icon">
<p class="paragraph button-red">S1</p>
</a>
</div>
<div class="btn">
<a href="http://facebook.com">
<img src="http://placehold.it/70x25/" alt="rwd-icon">
<p class="paragraph button-blue">S2</p>
</a>
</div>
<div class="btn">
<a href="http://facebook.com">
<img src="http://placehold.it/70x25/" alt="ux-icon">
<p class="paragraph button-green">S3</p>
</a>
</div>
</div>
</section>

fullpage.js with fixed sidebar image gallery

I am looking for a way to use fullpage.js as slideshow with a fixed sidebar on the left containing an "INFO" button which on click slides in a div with the information referring to the Section/Image, visible in the viewport.
I am using the basic setUp for fullpage.js with the div container "fullpage" including the "section" divs. Each section has a bg-image and a div with the capture to the image.
The sidebar is fixed on the left side and outside the "fullpage" container with the following markup.
<!-- Fixed Navigation Left -->
<aside class="sidebar fixed" id="gallery-nav">
<a class="gallery-nav-button-class float-left scrollDown"><i class="fa fa-long-arrow-left"></i></a>
<div class="button-group toggle-menu">
<i class="fa fa-long-arrow-down"></i> <span>INFO</span>
<a class="gallery-nav-button-class gallery-open"><i class="fa fa-long-arrow-down"></i> <span>GALERIE</span></a>
<i class="fa fa-caret-left scrollDown"></i>
<!-- Gallery image count 4 -->
<span>1/15</span>
<i class="fa fa-caret-right scrollUp"></i>
<h3><span>GELÄNDESPORT</span></h3>
</div>
<a data-menuanchor="Menu" href="index.html#Menu" class="gallery-nav-button-class menu-btn-fixed"> <span>MENU</span> <i class="fa fa-long-arrow-right"></i></a>
</aside>
Can anybody help me with the jquery code to solve this problem?
You can find the basic layout in the Image below.

Try This
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.site-nav{
height: 100vh;
width: 135px;
background-color: pink;
position: fixed;
}
body, html, .sidebar, .body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
}
.sidebar{
background-color: green;
width: 10%;
float: left;
height: 100%;
position: fixed;
}
.body{
background-color: white;
float:left;
width:90%;
height:100%;
}
#section-one {
height: 100vh;
width: 100%;
background-color: pink;
}
#section-two {
height: 100vh;
width: 100%;
background-color: red;
}
#section-three {
height: 100vh;
width: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="sidebar">
</div>
<div id="section-one">
</div>
<div id="section-two">
</div>
<div id="section-three">
</div>
</body>
</html>

Here is an screenshot of my site. I will put it on a server as soon as I can. And add the link to it.
Preview

Here is the HTML code of the site.
<!-- Fixed Navigation Left -->
<aside class="sidebar fixed" id="gallery-nav">
<a class="gallery-nav-button-class float-left scrollDown"><i class="fa fa-long-arrow-left"></i></a>
<div class="button-group toggle-menu">
<a class="gallery-nav-button-class"><i class="fa fa-long-arrow-down"></i> <span>INFO</span></a>
<a class="gallery-nav-button-class gallery-open"><i class="fa fa-long-arrow-down"></i> <span>GALERIE</span></a>
<a class="gallery-nav-button-class up-down-arrwos"><i class="fa fa-caret-left scrollDown"></i></a>
<!-- gallery image count 4 PHP Issue -->
<span>1/15</span>
<a class="gallery-nav-button-class up-down-arrwos"><i class="fa fa-caret-right scrollUp"></i></a>
<h3><span>GELÄNDESPORT</span></h3>
</div>
<a data-menuanchor="Menu" href="index.html#Menu" class="gallery-nav-button-class menu-btn-fixed"> <span>MENU</span> <i class="fa fa-long-arrow-right"></i></a>
</aside>
<div id="fullpage">
<!-- section 1 -->
<div class="section">
<div class="row gallery-content-box ">
<div class="small-12 medium-6 columns panel">
<h1>GELÄNDESPORT</h1>
<h2>1955—60</h2>
<p class="lead">die erste liebe<br>und Schule aller Renner</p>
<hr>
<a class="button scrollDown">WEITER</a>
</div>
<div class="small-12 medium-6 columns" id="glsp-1">
</div>
</div>
</div>
<!-- section 2 -->
<div class="section">
<div class="row gallery-content-box ">
<div class="small-12 medium-6 columns panel">
<h1>GELÄNDESPORT</h1>
<h2>Bruno Beuss</h2>
<hr>
<a class="button scrollDown">WEITER</a>
</div>
<div class="small-12 medium-6 columns wow fadeIn" id="glsp-2">
</div>
</div>
</div>
<!-- section 3 -->
<div class="section">
<div class="row gallery-content-box ">
<div class="small-12 medium-6 columns panel">
<h1>GELÄNDESPORT</h1>
<p class="lead">DIE ABSOLUTE BEHERRSCHUNG DER...</p>
<hr>
<a class="button scrollDown">GALERIE</a>
</div>
<div class="small-12 medium-6 columns wow fadeIn" id="glsp-3">
</div>
</div>
</div>
<!-- section 4 Gallery Start-->
<div class="section">
<div class="row gallery-content-box wow slideInLeft fadeIn">
<div class="wow fadeIn" id="glsp-4">
</div>
</div>
</div>
<!-- section 5 -->
<div class="section">
<div class="row gallery-content-box ">
<div class="small-12 medium-6 columns panel wow fadeIn" data-wow-duration="1s" data-wow-delay="0.2s" id="glsp-5-1">
</div>
<div class="medium-6 columns wow fadeIn" data-wow-duration="1s" data-wow-delay="0.4s" id="glsp-5-2">
</div>
</div>
</div>
</div>
<!-- Gallerie Lightbox -->
<div class="medium-3 columns toggle-lighbox hide animated slideOutLeft" id="gallery-lightbox">
<div class="row gallery-lightbox-innerwrap">
<ul class="medium-11" id="gallery-lightbox-menu">
<li data-menuanchor="firstPage" class="active">First section</li>
<li data-menuanchor="secondPage">Second section</li>
<li data-menuanchor="thirdPage">Third section</li>
<li data-menuanchor="fourthPage">Fourth section</li>
<li data-menuanchor="firstPage" class="active">First section</li>
<li data-menuanchor="secondPage">Second section</li>
<li data-menuanchor="thirdPage">Third section</li>
<li data-menuanchor="fourthPage">Fourth section</li>
<li data-menuanchor="firstPage" class="active">First section</li>
<li data-menuanchor="secondPage">Second section</li>
<li data-menuanchor="thirdPage">Third section</li>
<li data-menuanchor="fourthPage">Fourth section</li>
</ul>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/fullpage.js/vendors/jquery.slimscroll.min.js"></script>
<script src="bower_components/fullpage.js/jquery.fullPage.js"></script>
<script src="bower_components/what-input/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/foundation.js"></script>
<script src="bower_components/wow/dist/wow.js"></script>
<script src="js/app.js"></script>
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'fifthPage'],
menu: '#gallery-lightbox-menu',
resize: false,
animateAnchor:false,
scrollOverflow: true,
autoScrolling:true,
responsive: 900,
fitSection: false,
navigation:true,
navigationPosition: 'right',
navigationTooltips: ['firstSection', 'secondSection'],
showActiveTooltip: false,
slidesNavigation: true,
slidesNavPosition: 'bottom',
continuousVertical:true,
scrollBar: true,
css3: true,
afterLoad: function (anchorLink, index) {
// #toggle-menu for section 4...
if (index == 4) {
$(".toggle-menu").css('visibility','visible')
}
},
onLeave: function (index, nextIndex, direction) {
//going from section 3 to 4
if (index == 3 && direction == 'down') {
//whatever
}
//going form section 4 to 3
else if (index == 4 && direction == 'up') {
$(".toggle-menu").css('visibility','hidden')
}
}
});
// toggle-lighbox-opener
$('.gallery-open').click(function() {
if($('.toggle-lighbox').hasClass('slideOutLeft'))
{
$('.toggle-lighbox').addClass('slideInLeft').removeClass('hide slideOutLeft');
}
else
{
$('.toggle-lighbox').addClass('slideOutLeft').removeClass('slideInLeft');
}
});
// slimscroll.js
$(function(){
    $('.gallery-lightbox-innerwrap').slimScroll({
height: '100vh',
size: '7px',
position: 'right',
color: '#87704c',
alwaysVisible: true,
// distance: '-10px',
// start: $('#child_image_element'),
railVisible: true,
railColor: '#87704c',
railOpacity: 0.3,
wheelStep: 10,
allowPageScroll: true,
disableFadeOut: true,
    });
});
$(document).on('click', '.scrollDown', function(){
$.fn.fullpage.moveSectionDown();
});
$(document).on('click', '.scrollUp', function(){
$.fn.fullpage.moveSectionUp();
});
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 100, // default
mobile: true, // default
live: true // default
}
)
wow.init();
});
</script>

Categories