I need to create multiple slick slider in a single div .
There is some buttons related to slick. When I click on a button the slider changes corresponding to it.
I have tried it with kenwheeler slick slider but it doesn't work as I expect .It just creating a new slider item there.
$('.myslick').slick({
slidesToShow: 3,
slidesToScroll: 3
});
$('.newslick').on('click', function() {
jQuery('.myslick').html('<div>new content</div><div>new content</div><div>new content</div><div>new content</div> <div>new content</div><div>new content</div>').slick();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<div class="myslick">
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
<button class="newslick">New Slick</button>
<button class="featuredslick">Featured Slick</button>
<button class="oldslick">Old Slick</button>
I need to change the content dynamically with json or ajax.
I think this is you want to do. Its a custom function created with slick for my use.
class Tkslider{constructor(x) {this.x = x;var o,n,l;}slider(){var y=this.x[0];var co=(typeof(this.x[1]) != "undefined" && this.x[1] !== null) ? this.x[1] : {slidesToShow: 1,slidesToScroll: 1,arrows: false,fade: true,asNavFor: y+'_thumb',};var cn=(typeof(this.x[2]) != "undefined" && this.x[2] !== null) ? this.x[2] : {slidesToShow: 7,slidesToScroll: 1,asNavFor: y,dots: false,arrows: false,focusOnSelect: true};this.o = jQuery(y).slick(co);this.n = jQuery(y+'_thumb').slick(cn);this.l = jQuery(y).lightGallery({selector: 'a'});}destroy(){this.o.slick('unslick');this.n.slick('unslick');this.l.data('lightGallery').destroy(true);}}
setTimeout(function(){
jQuery(slider.x[0]).css('height',(jQuery(slider.x[0]).height()));
},2000);
var slider = new Tkslider(['#slider']);
var slide = slider.slider();
var slidejson ;
$('[data-slidertype]').bind("click", { key: slide }, function(event){
var newslide = '';
var newslide_thumb = '';
if($(this).data('slidertype') === 'camera'){
slidejson = [
{'src':'http://placehold.it/300x150&text=a1','thumb':'http://placehold.it/100x100&text=a1'},
{'src':'http://placehold.it/300x150&text=a2','thumb':'http://placehold.it/100x100&text=a2'},
{'src':'http://placehold.it/300x150&text=a3','thumb':'http://placehold.it/100x100&text=a3'},
{'src':'http://placehold.it/300x150&text=a4','thumb':'http://placehold.it/100x100&text=a4'},
{'src':'http://placehold.it/300x150&text=a5','thumb':'http://placehold.it/100x100&text=a5'},
{'src':'http://placehold.it/300x150&text=a6','thumb':'http://placehold.it/100x100&text=a6'},
{'src':'http://placehold.it/300x150&text=a7','thumb':'http://placehold.it/100x100&text=a7'},
];
}
else if($(this).data('slidertype') === 'threesix'){
slidejson = [
{'src':'http://placehold.it/300x150&text=b1','thumb':'http://placehold.it/100x100&text=b1'},
{'src':'http://placehold.it/300x150&text=b2','thumb':'http://placehold.it/100x100&text=b2'},
{'src':'http://placehold.it/300x150&text=b3','thumb':'http://placehold.it/100x100&text=b3'},
{'src':'http://placehold.it/300x150&text=b4','thumb':'http://placehold.it/100x100&text=b4'},
{'src':'http://placehold.it/300x150&text=b5','thumb':'http://placehold.it/100x100&text=b5'},
{'src':'http://placehold.it/300x150&text=b6','thumb':'http://placehold.it/100x100&text=b6'},
{'src':'http://placehold.it/300x150&text=b7','thumb':'http://placehold.it/100x100&text=b7'},
{'src':'http://placehold.it/300x150&text=b8','thumb':'http://placehold.it/100x100&text=b8'},
{'src':'http://placehold.it/300x150&text=b9','thumb':'http://placehold.it/100x100&text=b9'},
{'src':'http://placehold.it/300x150&text=b10','thumb':'http://placehold.it/100x100&text=b10'},
{'src':'http://placehold.it/300x150&text=b11','thumb':'http://placehold.it/100x100&text=b11'},
];
}
else if($(this).data('slidertype') === 'vdo'){
slidejson = [
{'src':'http://placehold.it/300x150&text=c1','thumb':'http://placehold.it/100x100&text=c1'},
{'src':'http://placehold.it/300x150&text=c2','thumb':'http://placehold.it/100x100&text=c2'},
{'src':'http://placehold.it/300x150&text=c3','thumb':'http://placehold.it/100x100&text=c3'},
{'src':'http://placehold.it/300x150&text=c4','thumb':'http://placehold.it/100x100&text=c4'},
{'src':'http://placehold.it/300x150&text=c5','thumb':'http://placehold.it/100x100&text=c5'},
{'src':'http://placehold.it/300x150&text=c6','thumb':'http://placehold.it/100x100&text=c6'},
{'src':'http://placehold.it/300x150&text=c7','thumb':'http://placehold.it/100x100&text=c7'},
{'src':'http://placehold.it/300x150&text=c8','thumb':'http://placehold.it/100x100&text=c8'},
{'src':'http://placehold.it/300x150&text=c9','thumb':'http://placehold.it/100x100&text=c9'},
{'src':'http://placehold.it/300x150&text=c10','thumb':'http://placehold.it/100x100&text=c10'},
];
}
$.each(slidejson, function (x, y) {
newslide += '<div data-index="x"><img src="'+y.src+'" alt="One" class="img-responsive w100"/></div>';
newslide_thumb += '<div><img src="'+y.thumb+'" class="img-responsive w100"/></a></div>';
});
slider.destroy();
$('#slider').html(newslide);
$('#slider_thumb').html(newslide_thumb);
slide = slider.slider();
});
body *{outline:none;}
.slick-slide {height: auto;}
.slider-nav-thumbnails .slick-slide {opacity: 0.5;}
.slider-nav-thumbnails .slick-slide.slick-current {opacity: 1;}
.w100{width: 100%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.6/js/lightgallery-all.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.6/css/lightgallery.min.css" />
<div class="container-fluid">
<div class="col-md-12">
<!-- MAIN SLIDES -->
<div id="slider" class="">
<div data-index="1">
<a href="http://placehold.it/300x150&text=one">
<img src="http://placehold.it/300x150&text=one" alt="One" class="img-responsive w100">
</a>
</div>
<div data-index="2">
<a href="http://placehold.it/300x150&text=two">
<img src="http://placehold.it/300x150&text=two" alt="One" class="img-responsive w100">
</a>
</div>
<div data-index="3">
<a href="http://placehold.it/300x150&text=three">
<img src="http://placehold.it/300x150&text=three" alt="One" class="img-responsive w100">
</a>
</div>
<div data-index="4">
<a href="http://placehold.it/300x150&text=four">
<img src="http://placehold.it/300x150&text=four" alt="One" class="img-responsive w100">
</a>
</div>
<div data-index="5">
<a href="http://placehold.it/300x150&text=five">
<img src="http://placehold.it/300x150&text=five" alt="One" class="img-responsive w100">
</a>
</div>
<div data-index="6">
<a href="http://placehold.it/300x150&text=six">
<img src="http://placehold.it/300x150&text=six" alt="One" class="img-responsive w100">
</a>
</div>
<div data-index="7">
<a href="http://placehold.it/300x150&text=seven">
<img src="http://placehold.it/300x150&text=seven" alt="One" class="img-responsive w100">
</a>
</div>
<div data-index="8">
<a href="http://placehold.it/300x150&text=eight">
<img src="http://placehold.it/300x150&text=eight" alt="One" class="img-responsive w100">
</a>
</div>
<div data-index="9">
<a href="http://placehold.it/300x150&text=nine">
<img src="http://placehold.it/300x150&text=nine" alt="One" class="img-responsive w100">
</a>
</div>
</div>
<!-- THUMBNAILS -->
<div id="slider_thumb" class="slider-nav-thumbnails">
<div><img src="http://placehold.it/100x100&text=one" class="img-responsive w100"></div>
<div><img src="http://placehold.it/100x100&text=two" class="img-responsive w100"></div>
<div><img src="http://placehold.it/100x100&text=three" class="img-responsive w100"></div>
<div><img src="http://placehold.it/100x100&text=four" class="img-responsive w100"></div>
<div><img src="http://placehold.it/100x100&text=five" class="img-responsive w100"></div>
<div><img src="http://placehold.it/100x100&text=six" class="img-responsive w100"></div>
<div><img src="http://placehold.it/100x100&text=seven" class="img-responsive w100"></div>
<div><img src="http://placehold.it/100x100&text=eight" class="img-responsive w100"></div>
<div><img src="http://placehold.it/100x100&text=nine" class="img-responsive w100"></div>
</div>
<div>
<button data-slidertype="camera">Image</button>
<button data-slidertype="threesix">360</button>
<button data-slidertype="vdo">Video</button>
</div>
</div>
Related
I have some code I found that would help make a webpage have a grid of photos and then once clicked they would be able to have a lightbox modal using bootstrap to go through all the photos. However once getting out of the modal and going to a different one by clicking on it would result in them going to the first picture in the column.
HTML
Grid One:
<section id="im-grid" class="image-grid im-image-grid">
<div class="container-xxl">
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_1.jpeg" class="img-fluid" alt="Add Part">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_2.jpeg" class="img-fluid" alt="Edit Part">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_3.jpeg" class="img-fluid" alt="Find Parts">
</a>
</figure>
</div>
</div>
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_4.jpeg" class="img-fluid" alt="Show Parts">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_5.jpeg" class="img-fluid"
alt="Part Details">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_6.jpeg" class="img-fluid"
alt="Keyboard Shortcuts">
</a>
</figure>
</div>
</div>
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_7.jpeg" class="img-fluid"
alt="Part History Part One">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_8.jpeg" class="img-fluid"
alt="Part History Part Two">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_9.jpeg" class="img-fluid"
alt="Export Parts Part One">
</a>
</figure>
</div>
</div>
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_10.jpeg" class="img-fluid"
alt="Export Parts Part Two">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_11.jpeg" class="img-fluid"
alt="Export Parts Part Three">
</a>
</figure>
</div>
</div>
</div>
<div class="modal lightbox-modal" id="im-lightbox-modal" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
aria-label="Close"></button>
<div class="modal-body im-modal-body">
<div class="container-fluid im-container-fluid p-0">
</div>
</div>
</div>
</div>
</div>
</section>
Grid Two:
<section id="sm-grid" class="image-grid sm-image-grid">
<div class="container-xxl">
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_1.jpeg" class="img-fluid" alt="Add Part">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_2.jpeg" class="img-fluid" alt="Edit Part">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_3.jpeg" class="img-fluid" alt="Find Parts">
</a>
</figure>
</div>
</div>
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_4.jpeg" class="img-fluid" alt="Show Parts">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_5.jpeg" class="img-fluid" alt="Part Details">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_6.jpeg" class="img-fluid"
alt="Keyboard Shortcuts">
</a>
</figure>
</div>
</div>
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_7.jpeg" class="img-fluid"
alt="Part History Part One">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_8.jpeg" class="img-fluid"
alt="Part History Part Two">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_9.jpeg" class="img-fluid"
alt="Export Parts Part One">
</a>
</figure>
</div>
</div>
</div>
<div class="modal lightbox-modal" id="sm-lightbox-modal" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
aria-label="Close"></button>
<div class="modal-body sm-modal-body">
<div class="container-fluid sm-container-fluid p-0">
</div>
</div>
</div>
</div>
</div>
</section>
The JavaScript:
Grid One:
const imImageGrid = document.querySelector(".im-image-grid");
const imLinks = imImageGrid.querySelectorAll("a");
const imImgs = imImageGrid.querySelectorAll("img");
const imLightboxModal = document.getElementById("im-lightbox-modal");
const imbsModal = new bootstrap.Modal(imLightboxModal);
const imModalBody = document.querySelector(".im-modal-body .im-container-fluid");
for (const link of imLinks) {
link.addEventListener("click", function (e) {
e.preventDefault();
const imCurrentImg = link.querySelector("img");
const imLightboxCarousel = document.getElementById("im-lightboxCarousel");
if (imLightboxCarousel) {
const imParentCol = link.parentElement.parentElement;
const imIndex = [...imParentCol.parentElement.children].indexOf(imParentCol);
const imbsCarousel = new bootstrap.Carousel(imLightboxCarousel);
imbsCarousel.to(imIndex);
} else {
imCreateCarousel(imCurrentImg);
}
imbsModal.show();
});
}
function imCreateCarousel(img) {
const imMarkup = `
<div id="im-lightboxCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="false">
<div class="carousel-inner">
${imCreateSlides(img)}
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#im-lightboxCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#im-lightboxCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
`;
imModalBody.innerHTML = imMarkup;
}
function imCreateSlides(img) {
let imMarkup = "";
const imCurrentImgSrc = img.getAttribute("src");
for (const img of imImgs) {
const imImgSrc = img.getAttribute("src");
const imImgAlt = img.getAttribute("alt");
imMarkup += `
<div class="carousel-item${imCurrentImgSrc === imImgSrc ? " active" : ""}">
<img src=${imImgSrc} alt=${imImgAlt}>
</div>
`;
}
return imMarkup;
}
Grid Two:
const smImageGrid = document.querySelector(".sm-image-grid");
const smLinks = smImageGrid.querySelectorAll("a");
const smImgs = smImageGrid.querySelectorAll("img");
const smLightboxModal = document.getElementById("sm-lightbox-modal");
const bsSmModal = new bootstrap.Modal(smLightboxModal);
const smModalBody = document.querySelector(".sm-modal-body .sm-container-fluid");
for (const link of smLinks) {
link.addEventListener("click", function (e) {
e.preventDefault();
const smCurrentImg = link.querySelector("img");
const smLightboxCarousel = document.getElementById("sm-lightboxCarousel");
if (smLightboxCarousel) {
const smParentCol = link.parentElement.parentElement;
const smIndex = [...smParentCol.parentElement.children].indexOf(smParentCol);
const bsSmCarousel = new bootstrap.Carousel(smLightboxCarousel);
bsSmCarousel.to(smIndex);
} else {
smCreateCarousel(smCurrentImg);
}
bsSmModal.show();
});
}
function smCreateCarousel(img) {
const smMarkup = `
<div id="sm-lightboxCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="false">
<div class="carousel-inner">
${smCreateSlides(img)}
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#sm-lightboxCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#sm-lightboxCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
`;
smModalBody.innerHTML = smMarkup;
}
function smCreateSlides(img) {
let smMarkup = "";
const smCurrentImgSrc = img.getAttribute("src");
for (const img of smImgs) {
const smImgSrc = img.getAttribute("src");
const smImgAlt = img.getAttribute("alt");
smMarkup += `
<div class="carousel-item${smCurrentImgSrc === smImgSrc ? " active" : ""}">
<img src=${smImgSrc} alt=${smImgAlt}>
</div>
`;
}
return smMarkup;
}
I would just like to be able to exit out of a modal of the photo and then if needed go to a different photo by clicking out of it. Im new to stack overflow so I apologize if the code is
dears friends.
I found this photo gallery ins this site: http://playgallery.siteseguro.ws/
I would like to use it but the play and pause button don't get anywhere. The buttons are not working and I don't see any code to make this work.
Is it possible to make this work? Below is the optimized code:
<html>
<head>
<link rel="stylesheet" href="http://playgallery.siteseguro.ws/js/novagaleria/slick-bootstrap.css"/>
<link rel="stylesheet" href="http://playgallery.siteseguro.ws/js/novagaleria/slick-style.css"/>
<link rel='stylesheet' id='fontawesome-css' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' type='text/css' media='all' />
</head>
<body>
<div class="col-slick-4">
<div class="slick-gallery">
<div class="slick-slider carousel-child" id="child-carousel" data-for=".carousel-parent" data-arrows="true" data-loop="false" data-dots="false" data-swipe="true" data-items="4" data-xs-items="4" data-sm-items="4" data-md-items="4" data-lg-items="5" data-slide-to-scroll="1">
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s1.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s2.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s3.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s4.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s5.jpg"/>
</div>
</div>
</div>
<div class="slick-item">
<div class="thumb slick_thumb_rect">
<div class="thumb__inner"><img src="http://playgallery.siteseguro.ws/images/s6.jpg"/>
</div>
</div>
</div>
</div>
<div class="slick-controls">
<div class="slick-controls-pause"><span class="fa fa-pause"></span></div>
<div class="slick-controls-play"><span class="fa fa-play"></span></div>
</div><br><br>
<div class="slick-slider carousel-parent" data-arrows="false" data-loop="false" data-dots="false" data-swipe="true" data-items="1" data-child="#child-carousel" data-for="#child-carousel" data-lightgallery="group">
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s1.jpg" alt="" height="480"/></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s2.jpg" height="480" /></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s3.jpg" alt="" height="480"/></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s4.jpg" alt="" height="480"/></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s5.jpg" alt="" height="480"/></div>
<div class="item"><img src="http://playgallery.siteseguro.ws/images/s6.jpg" alt="" height="480"/></div>
</div>
</div>
</div> <!-- /col-slick-4 -->
<script src="http://playgallery.siteseguro.ws/js/novagaleria/slick-core.min.js"></script>
<script src="http://playgallery.siteseguro.ws/js/novagaleria/slick-script.js"></script>
</body>
</html>
you would have to add some jquery
$('.slick-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
pauseOnDotsHover:false,
autoplaySpeed:500,
dots: false,
arrows: false,
infinite: true
});
$('#pause').click(function() {
$('.slick-slider').slick('slickPause');
});
$('#play').click(function() {
$('.slick-slider').slick('slickPlay');
});
And then edit your buttons to have an id of pause and play respectively and remove the a tag
<div class="slick-controls">
<div class="slick-controls-pause slick-play"><span id="pause" class="fa fa-pause"></span></div>
<div class="slick-controls-play slick-play"><span id="play" class="fa fa-play"></span></div>
</div><br><br>
If you want to keep the pointer on hover. Instead of using an a tag. Use cursor: pointer; on your .slick-play
In working with a code chunk such as the following, I am attempting to add a unique class name to each instance of the class "duplicated-class" which is on the same element as the class "affiliate-logo".
Important notes:
"duplicated-class" represents a dynamic variable, that could be anything.
The desired outcome is to append the duplicated classes with a numeral ('.class-1', '.class-2', '.class-3', etc....
Here is an example the code structure:
<div id="integrations">
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class"><img src="" alt=""></div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class"><img src="" alt=""></div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo different-class"><img src="" alt=""></div>
</div>
</div>
</div>
</div>
</div>
The post-item group is being generated from a COS-listing with the 'duplicate-class' being pulled from the {{name}} value that must allow for duplicate value entries.
While I can find methods for producing class lists for direct descendants of the wrapping ID, I cannot seem to find (or figure out) anything that produces the result of finding the "duplicate-class" while nested more deeply in the produced structure.
My initial thoughts are to:
Identify the post-item groups
Find the '.affiliate-logo' class within each post-item group
Identify the second class next to '.affiliate-logo' (in this example: .duplicate-class) and assign it to a variable (var = adjacentClass) <-- this is where I get lost on how to accomplish this check.
Check to see if (adjacentClass) matches any other (adjacentClass) from other post-item groups.
Use counter to act as unique identifier addition (var i = i)
if(adjacentClass === adjacentClass){ $(".duplicate-class').replaceClass('adjacentClass' + i) } else {}
(I would actually try write that logic out in javascript, if I could figure out step 3.)
Any assistance that can be offered for this issue would be much appreciated.
Articles I have referenced in attempting to find a solution:
How find nested div with same class name in jquery?
How do I access the list of classnames using javascript/jQuery?
jquery select class inside parent div
Target the 2nd instance of a CSS Class
** Edited to fix a terminology conflict
UPDATE 2
In Snippet 2 we have used .each() twice. Once to iterate every div.affiliate-logo and once for the second class each div.affiliate-logo has. A for loop filters out duplicates that are stored in an array. The hardest part was what OP had trouble was with getting the second class. This is how:
$(this).prop('classList');
In plain JavaScript, classList is a property when it's used without any .add, .remove, etc. it will return an array of classNames (in the comments of Snippet 2, any reference to a string in this array will be "classString").
Review Snippet 2 in Full page mode. Details are commented in Snippet 2.
UPDATE 1
the first 'duplicate-class' becomes 'duplicate-class-1', the second becomes 'duplicate-class-2'
Not sure what you are trying to do. I think you are thinking that classes are like DOM objects as elements are. Review the Snippet and let me know if this is what you wanted or not.
SNIPPET 1
$('.duplicate-class').each(function(idx, obj) {
var unique = 'duplicate-class' + (idx + 1);
$(this).addClass(unique)
$(this).text('this is ' + unique); //This is just to show it works
});
div {
border: 1px solid black;
height: 40px;
width: 200px;
padding: 10px;
color: white;
background: rgba(0, 0, 0, .3);
}
.affiliate-logo {
border: 2px dashed red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="integrations">
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo different-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
SNIPPET 2
// .each() .affiliate-logo do this...
$('.affiliate-logo').each(function(idx, obj) {
/* Get the classList .prop()erty and store it
|| in a var called list. list is now an array
|| of classes that belong to this particular
|| .affiliate-logo.
*/
var list = $(this).prop('classList');
// Store the second classString in a var called second
var second = list[1];
/* Create an array with the classString of 'affiliate-
|| logo' because we already know that it will be a
|| duplicate. Call this array dupes.
*/
var dupes = ['affiliate-logo'];
/* for every classString that's in dupes array
|| compare it to the value of second. If there's
|| a match bust out of this loop and go on to the
|| next .affiliate-logo.
*/
for (let a = 0; a < dupes.length; a++) {
if (second === dupes[a]) {
return;
}
}
/* Since there were no matches, we continue.
|| Push second in the dupes array so if ever found
|| again, second will be rejected by the previous
|| for loop.
*/
dupes.push(second);
/* Concat second with a dot so it'll pass as a class
|| selector then store it in a var called klass.
*/
var klass = '.' + second;
// each() klass will...
$(klass).each(function(index, item) {
/* concat second + (current)index as a string
|| then addClass() that string to the current
|| div.affiliate-logo.{{klass}}
*/
$(item).addClass(second + index);
/* insert text that shows it's new class. The
|| new unique class can be verified by F12.
*/
$(item).text('This is ' + second + index);
});
});
div {
border: 1px solid black;
height: 40px;
width: 200px;
padding: 10px;
color: white;
background: rgba(0, 0, 0, .3);
}
.affiliate-logo {
border: 2px dashed red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="integrations">
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo different-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo o-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo x-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo klass-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo a-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo dupe-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo bass-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo wrong-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo no-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo no-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo x-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo logo-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo long-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo x-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo duplicate-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo x-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo no-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="post-item" data-name="name">
<div class="rss-card" style="">
<div class="hs-rss-item">
<div class="rss-item-banner">
<img class="hs-rss-featured-image" src="" alt="">
<div class="affiliate-logo no-class">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
I have a div in the middle of html page.
It has 4 links that have images inside and some text.
What I need is this : when a user clicks on one of those links, it completely changes the div ( without reloading the page ), which will have an image, another text and a link. Those 4 links need to stay there, so that user can click on another one and get the same change again.
I couldn't write or find any code that helps me beyond replacing or toggling functions, which are good for 2 elements only.
Here's my HTML markup:
<div class="container-fluid fullspan offers_content" id="offers_content">
<div class="row offers">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="button_quickstart_offer" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offers_text col-md-7">
<p> text </p>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_1">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offer_text_ad">
<img src="images/offer1.png" alt="" class="img-responsive offer_image" />
<p>text-111</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_2">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offer_text_ad">
<img src="images/offer2.png" alt="" class="img-responsive offer_image" />
<p>text-222</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_3">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button" />
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button" />
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button" />
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button" />
</div>
<div class="offer_text_ad">
<img src="images/offer3.png" alt="" class="img-responsive offer_image" />
<p>text-333</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_4">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button" />
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button" />
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button" />
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button" />
</div>
<div class="offer_text_ad">
<img src="images/offer4.png" alt="" class="img-responsive offer_image" />
<p>text-444</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
My relevant CSS:
.offers_content{
min-height:450px;
background-color:#fff;
}
#offer_quickstart,#offer_quickstartplus, #offer_basic, #offer_pro{
display:none;
}
#offers_content{
display:block;
}
.offer_image{
margin: 5% auto auto auto;
}
.offer_text_ad>p{
color:#000;
}
Thanks in advance.
Use Javascript and do something along the lines of:
function swapDivs(div1, div2) { // where div 1 will disappear and div 2 will take its place
document.getElementById(div1).className('hidden');
document.getElementById(div2).className('shown');
}
and then CSS like
.hidden {
top: -500px; // forces div above the screen
}
.shown {
// CSS code for the div you want shown
}
And in the HTML with the link it could be
<a onclick="javascript:swap('rowOffers','row');"><img src="images/pic4.jpg" alt="button_quickstart_offer" class="offer_button" id="offer_qs_button"/></a>
Just use "swap('div you want hidden', 'div you want shown')" as you need to.
So the end result will make the first div disappear and the second reappear in its place. So initially code the div you want shown from the beginning set its class to "shown" and then all the other divs as "hidden".
Hopefully this has been helpful and answers your question. If not, feel free to ask anymore about it :)
I'm using Bootstrap and I'm trying to use the Collapse.
I want the div #film to hide when I click the <li class="rekruterring>and I'm missing something. It won't close no matter what I do, I've tried with accordion, data-parents, javascript and nothing makes the #filmdiv hide when I click the .rekruterring and the #rekruttering div is shown.
Here's my code and be aware that the #rekruterring is expanding as it should, but is not hiding #film.
/* Latest compiled and minified JavaScript included as External Resource */
/* DOES NOTHING */
$(document).ready(function() {
$(".rekruttering").click(function() {
$("#film").collapse('hide');
});
})
/* VIMEO */
img {
max-width: 100%;
height: auto;
}
.video {
background: #fff;
padding-bottom: 20px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
width: 100%;
/* Thumbnails 5 across */
margin: 1%;
}
.video img {
width: 100%;
opacity: 1;
}
.video img:hover,
.video img:active,
.video img:focus {
opacity: 0.75;
}
.categories li {
list-style-type: none;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="accordion" class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Galleri</h2>
<hr class="bg-primary">
</div>
<div class="col-lg-12 categories text-center">
<ul>
<a class="film" data-toggle="collapse" data-target="#film" data-parent="#accordion">Firmapræsentation</a> |
<a class="rekruterring" data-toggle="collapse" data-target="#rekruterring" data-parent="#accordion">Rekruterringsfilm</a> |
<li>TV -/Biografspots & Imagefilm</li>|
<li>Salgs- & Produktfilm</li>
</ul>
</div>
</div>
<div id="film" class="row text-centered collapse in">
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">FILM</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">FILM</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">FILM</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg">
</a>
</figure>
<h2 class="videoTitle" style="text-align:center;">FILM</h2>
</article>
</div>
</div>
<!-- FILM -->
<div id="rekruterring" class="row text-centered collapse">
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">REKRUTERRING</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">REKRUTERRING</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h3 class="videoTitle" style="text-align:center;">REKRUTERRING</h3>
</article>
</div>
<div class="col-lg-3 text-centered">
<article class="video">
<figure>
<a class="" href="//vimeo.com/1084537" data-lity>
<img class="videoThumb" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg">
</a>
</figure>
<h2 class="videoTitle" style="text-align:center;">REKRUTERRING</h2>
</article>
</div>
</div>
<!-- REKRUTERRING -->
</div>
This is not working because there is a Bootstrap bug/issue when using the parent class. It relies on the use of the panel class being wrapped around your collapse elements.
https://github.com/twbs/bootstrap/issues/10966
Updated JSFiddle
<div class="panel">
<div id="film" class="row text-centered collapse in">
<div class="panel">
<div id="rekruterring" class="row text-centered collapse">