I have a slider that has a main image area and small thumbs on the side. When you click on a thumb it loads that image in a larger size in the main image area. There are also next and previous links. If there are more thumbs then there is space for to show then only 13 are shown and the rest hidden. When you click on "next" all the thumbs move up one causing one more to be exposed. When you click "previous" all the thumbs move down one causing one more previous thumb to be exposed. That's how it works with vertical scrolling, and here's the code for it:
HTML:
<div class="gallery">
<div id="gallery_actions">
<div class="gallery_count"><span class="counter">3</span> / 17</div>
<div class="view_slideshow"><label><input class="slideshow_toggle" type="checkbox">Start slideshow</label></div>
</div>
<div class="carousel">
<div class="arrow arrow_previous"></div>
<div class="carousel_region">
<div class="carousel_subregion">
<ul class="carousel_slide">
<li class="thumb" id="carousel_thumb_5626316" data-json="{'id':'5626316'}">
<img src="shark_files/fb1490b2aa8dcf9a64861f9dcab86ca1.jpg" alt="Picture: 1920315" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_4034028" data-json="{'id':'4034028'}">
<img src="shark_files/fa41b5ff4a148ac68e65d1dcfd2c5f6a.jpg" alt="Picture: 1911579" height="30" width="40">
</li>
<li class="thumb selected" id="carousel_thumb_4063804" data-json="{'id':'4063804'}">
<img src="shark_files/b2850e2656bd41efe09f4df2cfadecc3.jpg" alt="Picture: 1914572" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_3903274" data-json="{'id':'3903274'}">
<img src="shark_files/d2e254b960b5dbb854b905c67ff68e1b.jpg" alt="Picture: 1901129" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_99834" data-json="{'id':'99834'}">
<img src="shark_files/71389663b3c371be9ad953273a0894c4.jpg" alt="Picture: 1704362" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_3119931" data-json="{'id':'3119931'}">
<img src="shark_files/eca402b67c9126340540aa1c62bc83c3.jpg" alt="Picture: 1792796" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_3955105" data-json="{'id':'3955105'}">
<img src="shark_files/2244914dee3f7e23ca5a2a1103a29934.jpg" alt="Picture: 1905495" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_6254076" data-json="{'id':'6254076'}">
<img src="shark_files/39fa72602391c40bc3844d07d68e4e57.jpg" alt="Picture: 1942819" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_61197" data-json="{'id':'61197'}">
<img src="shark_files/e194fd0bcb8c652e56321d3850fb6ca0.jpg" alt="Picture: 3685" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_58516" data-json="{'id':'58516'}">
<img src="shark_files/143f53f536ae4b12b82b615f37de2313.jpg" alt="Picture: 16870" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_42148" data-json="{'id':'42148'}">
<img src="shark_files/6fdbf9d94d8c325c0fc2ccbbf0ef10b9.jpg" alt="Picture: 1608493" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_43248" data-json="{'id':'43248'}">
<img src="shark_files/296697046f7d5ade52b9c0c8330894a8.jpg" alt="Picture: 1596140" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_44795" data-json="{'id':'44795'}">
<img src="shark_files/4fcd7df720d497ddfca91e23c812dcc6.jpg" alt="Picture: 148030" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_47611" data-json="{'id':'47611'}">
<img src="shark_files/6a7fd11395364258f7ba78b40756c073.jpg" alt="Picture: 105834" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_56197" data-json="{'id':'56197'}">
<img src="shark_files/53469c1aca114944f1b380cd17dff886.jpg" alt="Picture: 39682" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_6564813" data-json="{'id':'6564813'}">
<img src="shark_files/2d2bc3ff87b089141f2cebc318d7e9c0.jpg" alt="Picture: 1955011" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_42795" data-json="{'id':'42795'}">
<img src="shark_files/1e2f946e9a0b4fd42399569761c0820b.jpg" alt="Picture: 1601015" height="30" width="40">
</li>
</ul>
</div>
</div>
<div class="arrow arrow_next"></div>
</div>
<div id="pic_main"><img style="position: relative; top: 131.5px;" src="shark_files/8d1ff92265c0e162dcc35fb49de19ae6.jpg" alt="Picture: 11896846" height="337" width="450"></div>
<div class="pic_info">
<div class="title">Title goes here</div>
<div id="description" class="description">Description goes here</div>
</div>
</div>
CSS FOR VERTICAL SLIDE:
.gallery {
background: #000;
color: #fff;
padding: 10px;
}
.gallery .gallery_count {
float: right;
font-size: 14px;
font-weight: bold;
}
.gallery #gallery_actions .gallery_count { float: right; }
.carousel {
float: right;
width: 125px;
}
.carousel .arrow {
display: block;
height: 20px;
background: url(../sprite_slideshow_controls.png) no-repeat top left;
width: 46px;
height: 30px;
}
.carousel .arrow_previous {
background-position: 0 0;
}
.carousel .arrow_previous:hover {
background-position: 0 -30px;
cursor: pointer;
}
.carousel .arrow_previous:active {
background-position: 0 -60px;
}
.carousel .arrow_next {
background-position: -46px 0;
}
.carousel .arrow_next:hover {
background-position: -46px -30px;
cursor: pointer;
}
.carousel .arrow_next:active {
background-position: -46px -60px;
}
.carousel .carousel_region {
overflow: hidden;
width: 40px;
height: 450px;
}
.carousel .carousel_subregion {
overflow: hidden;
z-index: 1000;
position: relative;
width: 40px;
height: 450px;
}
.carousel ul {
margin: 0;
padding: 0;
list-style: none;
z-index: 500;
}
.carousel ul li {
float: left;
overflow: hidden;
margin: 0 0 5px 0;
opacity: .5;
filter: alpha(opacity = 50);
background: #ccc;
width: 40px;
height: 30px;
}
.carousel ul li:hover {
opacity: .8;
filter: alpha(opacity = 80);
}
.carousel ul li.selected, .carousel ul li.selected:hover {
opacity: 1;
filter: alpha(opacity = 100);
}
.carousel .thumb img {
cursor: pointer;
}
#pic_main {
text-align: center;
background: #000;
border: 1px solid red;
width: 600px;
height: 450px;
}
#pic_main img {
margin: 0 auto;
display: block;
}
#pic_main img.loading {
display: block;
position: relative;
top: 280px;
}
#pic_main img:first {
display: block;
}
JQUERY PLUGIN CODE:
(function($) {
if(typeof($.fn.scrollTo) == 'function') {
$.fn.slideShow = function(options) {
var defaults = {
axis: 'y',
click: function() { },
counter: '.counter',
left: '.arrow_previous',
increment: 1,
mouseover: function() { },
mouseout: function() { },
next: function() { },
previous: function() { },
region: '.carousel_region',
right: '.arrow_next',
selected: '.thumb:first',
selected_class: 'selected',
slideshow_status: false,
slideshow_time: 6,
slideshow_toggle: '.slideshow_toggle',
speed: 400,
subregion: '.carousel_subregion',
thumb: '.thumb'
};
var options = $.extend(defaults, options);
return $(this).each(function() {
var region = $(options.region, $(this));
var subregion = $(options.subregion, $(this));
var left = $(options.left, $(this));
var right = $(options.right, $(this));
var slideshow = $(options.slideshow_toggle);
var timeout;
var dimension;
if(options.axis == 'x') {
dimension = region.find(options.thumb).eq(0).outerWidth();
} else if(options.axis == 'y') {
dimension = region.find(options.thumb).eq(0).outerHeight();
}
var update_counter = function() {
var index = $(region).find(options.thumb).index($(region).find(options.thumb + '.' + options.selected_class));
$(options.counter).text(index + 1);
};
$(this)
.bind('next', function(event) { region.trigger('next'); })
.bind('previous', function(event) { region.trigger('previous'); });
region
.bind('next', function(event) {
event.stopPropagation();
if(!$(options.thumb + ':last', region).hasClass(options.selected_class)) {
var next = region.find(options.thumb).index(region.find('.' + options.selected_class)) + options.increment;
if(next + options.increment > region.find(options.thumb).length) {
next = region.find(options.thumb).length - options.increment;
}
var next_thumb = region.find(options.thumb).removeClass(options.selected_class).eq(next);
if(next_thumb.length == 0) {
next_thumb = region.find(options.thumb + ':last');
}
next_thumb.addClass(options.selected_class);
subregion.scrollTo(next_thumb, (options.speed * options.increment), { axis: options.axis });
update_counter();
return options.next(event);
}
})
.bind('previous', function(event) {
event.stopPropagation();
if(!$(options.thumb + ':first', region).hasClass(options.selected_class)) {
var prev = region.find(options.thumb).index(region.find('.' + options.selected_class)) - options.increment;
if(prev < 0) {
prev = 0;
}
var prev_thumb = region.find(options.thumb).removeClass(options.selected_class).eq(prev);
if(prev_thumb.length == 0) {
prev_thumb = region.find(options.thumb + ':first');
}
prev_thumb.addClass(options.selected_class);
subregion.scrollTo(prev_thumb, (options.speed * options.increment), { axis: options.axis });
update_counter();
return options.previous(event);
}
})
.find(options.thumb)
.bind('click', function(event) {
// Move Selected Class
region.find('.' + options.selected_class).removeClass(options.selected_class);
$(this).addClass(options.selected_class);
// Update Counter
update_counter();
return options.click(event);
})
.bind('mouseover', function(event) {
return options.mouseover(event);
})
.bind('mouseout', function(event) {
return options.mouseout(event);
});
left.click(function() {
return region.trigger('previous');
});
right.click(function() {
return region.trigger('next');
});
slideshow
.attr('checked', options.slideshow_status)
.click(function() {
if($(this).is(':checked')) {
region.trigger('next');
timeout = setInterval(function() { region.trigger('next'); }, options.slideshow_time * 850);
} else {
clearInterval(timeout);
}
});
if(options.selected !== false) {
$(region).find(options.selected).click();
subregion.scrollTo($(options.selected, region).eq(0), options.speed);
}
if(options.slideshow_status) {
timeout = setInterval(function() { region.trigger('next'); }, options.slideshow_time * 850);
}
});
};
}
})(jQuery);
I want to change the behavior a bit and have the images scroll horizontally instead of vertically. I see that one of the plugin options is axis. I changed that value to "x" instead of "y". and changed the css to this:
.gallery {
background: #000;
color: #fff;
padding: 10px;
}
.gallery .gallery_count {
float: right;
font-size: 14px;
font-weight: bold;
}
.gallery #gallery_actions .gallery_count { float: right; }
.carousel {
float: right;
width: 125px;
border: 1px solid green;
width: 490px;
}
.carousel .arrow {
display: block;
height: 20px;
background: url(../sprite_slideshow_controls.png) no-repeat top left;
width: 46px;
height: 30px;
}
.carousel .arrow_previous {
background-position: 0 0;
}
.carousel .arrow_previous:hover {
background-position: 0 -30px;
cursor: pointer;
}
.carousel .arrow_previous:active {
background-position: 0 -60px;
}
.carousel .arrow_next {
background-position: -46px 0;
}
.carousel .arrow_next:hover {
background-position: -46px -30px;
cursor: pointer;
}
.carousel .arrow_next:active {
background-position: -46px -60px;
}
.carousel .carousel_region {
overflow: hidden;
width: 490px;
height: 30px;
}
.carousel .carousel_subregion {
overflow: hidden;
z-index: 1000;
position: relative;
width: 490px;
height: 30px;
}
.carousel ul {
margin: 0;
padding: 0;
list-style: none;
z-index: 500;
}
.carousel ul li {
float: left;
overflow: hidden;
margin: 0 0 5px 0;
opacity: .5;
filter: alpha(opacity = 50);
background: #ccc;
width: 40px;
height: 30px;
}
.carousel ul li:hover {
opacity: .8;
filter: alpha(opacity = 80);
}
.carousel ul li.selected, .carousel ul li.selected:hover {
opacity: 1;
filter: alpha(opacity = 100);
}
.carousel .thumb img {
cursor: pointer;
}
#pic_main {
text-align: center;
background: #000;
border: 1px solid red;
width: 600px;
height: 450px;
}
#pic_main img {
margin: 0 auto;
display: block;
}
#pic_main img.loading {
display: block;
position: relative;
top: 280px;
}
#pic_main img:first {
display: block;
}
Otherwise the HTML and rest of the jQuery is exactly the same. It's not working however. When you click "next" the images don't slide left one causing the next in the list to be exposed.
I'm not sure if this is a jQuery or a CSS issue but I spent all day yesterday trying to figure it out with no luck. Can anyone please help?
Related
I am using an image carousel which is working perfectly. Except that I can't use 2nd, 3rd carousel on same page. If I use more than one carousel on same page than the 2nd and 3rd are not working only the 1st. I am not expert and need some help if it possbile to change the code and have more than one carousel on same page? Here is the code:
Style:
/** img-carousel **/
#imgages-carousel {
display: grid;
align-items: center;
justify-items: center;
padding: 40px 0px;
}
.img-carousel-container {
width: 800px;
position: relative;
}
.img-carousel {
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 5px;
}
.img-carousel div {
flex: none;
scroll-snap-align: start;
width: 800px;
position: relative;
}
.img-carousel div img {
display: block;
width: 100%;
object-fit: cover;
}
.img-carousel div p {
position: absolute;
top: 0;
right: 10px;
background: rgba(0,0,0,0.5);
color: #fff;
padding: 5px;
border-radius: 10px;
}
.img-carousel-container button {
position: absolute;
top: calc(50% - 15px);
transform: translateY(-50%);
border: none;
background-color: rgba(255, 193, 7, 0.7);
color: #000;
cursor: pointer;
padding: 10px 15px;
border-radius: 50%;
outline: none;
opacity: 0;
transition: all ease-in-out 0.5s;
}
#prev {
left: 10px;
}
#next {
right: 10px;
}
.img-carousel-container:hover button {
opacity: 1;
}
.img-carousel-container button:hover {
background-color: #ffc107;
}
/** custom scrollbar **/
.img-carousel::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.img-carousel::-webkit-scrollbar-thumb {
background: #ffc107;
border-radius: 10px;
}
.img-carousel::-webkit-scrollbar-track {
background: transparent;
}
.img-carousel-container:hover .img-carousel::-webkit-scrollbar-thumb {
visibility: visible;
}
#media screen and (max-width: 800px) {
.img-carousel-container {
width: 100%;
}
.img-carousel div {
width: 100%;
}
}
Script:
const carousel = document.querySelector('.img-carousel');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
let carsouselImages = document.querySelectorAll('.img-carousel div');
//Next Carousel
const nextCarousel = () => {
if(carsouselImages[carsouselImages.length - 1]) {
carousel.scrollTo(0, 0);
}
carousel.scrollBy(300, 0);
};
nextBtn.addEventListener('click', e => {
nextCarousel();
});
//Prev Carousel
const prevCarousel = () => {
if(carsouselImages[0]) {
carousel.scrollTo(4800,0);
}
carousel.scrollBy(-300, 0);
};
prevBtn.addEventListener('click', e => {
prevCarousel();
});
// Auto carousel
const auto = true; // Auto scroll
const intervalTime = 5000;
let sliderInterval;
if (auto) {
sliderInterval = setInterval(nextCarousel, intervalTime);
};
carousel.addEventListener('mouseover', (stopInterval) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('mouseleave', (startInterval) => {
if (auto) {
sliderInterval = setInterval(nextCarousel, intervalTime);
}
});
//for mobile events
carousel.addEventListener('touchstart', (stopIntervalT) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('touchend', (startIntervalT) => {
if (auto) {
sliderInterval = setInterval(nextCarousel, intervalTime);
}
});
//Debounce
var previousCall;
window.addEventListener('resize', () => {
if (previousCall >= 0) {
clearTimeout(previousCall);
}
previousCall = setTimeout(() => {
carousel.scrollBy(-300, 0);
}, 200);
});
Html:
<!-- section images carousel -->
<section id="imgages-carousel">
<div class="img-carousel-container">
<div class="img-carousel">
<div>
<img src="https://source.unsplash.com/9Nok_iZEgLk/800x450">
<p>1/6</p>
</div>
<div>
<img src="https://source.unsplash.com/4v7ubW7jz1Q/800x450">
<p>2/6</p>
</div>
<div>
<img src="https://source.unsplash.com/rtCujH697DU/800x450">
<p>3/6</p>
</div>
<div>
<img src="https://source.unsplash.com/ELv8fvulR0g/800x450">
<p>4/6</p>
</div>
<div>
<img src="https://source.unsplash.com/LoPGu6By90k/800x450">
<p>5/6</p>
</div>
<div>
<img src="https://source.unsplash.com/Ndz3w6MCeWc/800x450">
<p>6/6</p>
</div>
</div>
<button id="prev"><i class="fas fa-chevron-left fa-2x"></i></button>
<button id="next"><i class="fas fa-chevron-right fa-2x"></i></button>
</div>
</section>
Here is a solution looping through the carousels. All you need to do is to make sure your styles are added. There are styles based on the id of the carousels - that needs to be added for all of them or made universal.
Here is little bit revised answer, no need to declare the functions and variables several times inside the forLoop like it was before.
What this code does it selects all carousels with the class .img-carousel and loops through them. Adding functionality to each carousel and relative buttons (based on index). The core functionality is the same only now it is added dynamically.
const carousels = document.querySelectorAll('.img-carousel');
const prevBtn = document.querySelectorAll('.prev');
const nextBtn = document.querySelectorAll('.next');
let carsouselImages = document.querySelectorAll('.img-carousel div');
//Next Carousel
const nextCarousel = (carousel) => {
if(carsouselImages[carsouselImages.length - 1]) {
carousel.scrollTo(0, 0);
}
carousel.scrollBy(300, 0);
};
//Prev Carousel
const prevCarousel = (carousel) => {
if(carsouselImages[0]) {
carousel.scrollTo(4800,0);
}
carousel.scrollBy(-300, 0);
};
// Auto carousel
carousels.forEach((carousel, index)=>{
nextBtn[index].addEventListener('click', e => {
nextCarousel(carousel);
});
prevBtn[index].addEventListener('click', e => {
prevCarousel(carousel);
});
// Auto carousel
const auto = true; // Auto scroll
const intervalTime = 5000;
let sliderInterval;
let previousCall;
if (auto) {
sliderInterval = setInterval(()=>nextCarousel(carousel), intervalTime);
};
carousel.addEventListener('mouseover', (stopInterval) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('mouseleave', (startInterval) => {
if (auto) {
sliderInterval = setInterval(()=>nextCarousel(carousel), intervalTime);
}
});
//for mobile events
carousel.addEventListener('touchstart', (stopIntervalT) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('touchend', (startIntervalT) => {
if (auto) {
sliderInterval = setInterval(()=>nextCarousel(carousel), intervalTime);
}
});
//Debounce
window.addEventListener('resize', () => {
if (previousCall >= 0) {
clearTimeout(previousCall);
}
previousCall = setTimeout(() => {
carousel.scrollBy(-300, 0);
}, 200);
});
});
/** img-carousel **/
#imgages-carousel {
display: grid;
align-items: center;
justify-items: center;
padding: 40px 0px;
}
#imgages-carousel1 {
display: grid;
align-items: center;
justify-items: center;
padding: 40px 0px;
}
.img-carousel-container {
width: 800px;
position: relative;
}
.img-carousel {
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 5px;
}
.img-carousel div {
flex: none;
scroll-snap-align: start;
width: 800px;
position: relative;
}
.img-carousel div img {
display: block;
width: 100%;
object-fit: cover;
}
.img-carousel div p {
position: absolute;
top: 0;
right: 10px;
background: rgba(0,0,0,0.5);
color: #fff;
padding: 5px;
border-radius: 10px;
}
.img-carousel-container button {
position: absolute;
top: calc(50% - 15px);
transform: translateY(-50%);
border: none;
background-color: rgba(255, 193, 7, 0.7);
color: #000;
cursor: pointer;
padding: 10px 15px;
border-radius: 50%;
outline: none;
opacity: 0;
transition: all ease-in-out 0.5s;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
.img-carousel-container:hover button {
opacity: 1;
}
.img-carousel-container button:hover {
background-color: #ffc107;
}
/** custom scrollbar **/
.img-carousel::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.img-carousel::-webkit-scrollbar-thumb {
background: #ffc107;
border-radius: 10px;
}
.img-carousel::-webkit-scrollbar-track {
background: transparent;
}
.img-carousel-container:hover .img-carousel::-webkit-scrollbar-thumb {
visibility: visible;
}
#media screen and (max-width: 800px) {
.img-carousel-container {
width: 100%;
}
.img-carousel div {
width: 100%;
}
}
<!-- section images carousel -->
<section id="imgages-carousel">
<div class="img-carousel-container">
<div class="img-carousel">
<div>
<img src="https://source.unsplash.com/9Nok_iZEgLk/800x450">
<p>1/6</p>
</div>
<div>
<img src="https://source.unsplash.com/4v7ubW7jz1Q/800x450">
<p>2/6</p>
</div>
<div>
<img src="https://source.unsplash.com/rtCujH697DU/800x450">
<p>3/6</p>
</div>
<div>
<img src="https://source.unsplash.com/ELv8fvulR0g/800x450">
<p>4/6</p>
</div>
<div>
<img src="https://source.unsplash.com/LoPGu6By90k/800x450">
<p>5/6</p>
</div>
<div>
<img src="https://source.unsplash.com/Ndz3w6MCeWc/800x450">
<p>6/6</p>
</div>
</div>
<button class="prev"><i class="fas fa-chevron-left fa-2x"></i></button>
<button class="next"><i class="fas fa-chevron-right fa-2x"></i></button>
</div>
</section>
<section id="imgages-carousel1">
<div class="img-carousel-container">
<div class="img-carousel">
<div>
<img src="https://source.unsplash.com/9Nok_iZEgLk/800x450">
<p>1/6</p>
</div>
<div>
<img src="https://source.unsplash.com/4v7ubW7jz1Q/800x450">
<p>2/6</p>
</div>
<div>
<img src="https://source.unsplash.com/rtCujH697DU/800x450">
<p>3/6</p>
</div>
<div>
<img src="https://source.unsplash.com/ELv8fvulR0g/800x450">
<p>4/6</p>
</div>
<div>
<img src="https://source.unsplash.com/LoPGu6By90k/800x450">
<p>5/6</p>
</div>
<div>
<img src="https://source.unsplash.com/Ndz3w6MCeWc/800x450">
<p>6/6</p>
</div>
</div>
<button class="prev"><i class="fas fa-chevron-left fa-2x "></i></button>
<button class="next"><i class="fas fa-chevron-right fa-2x "></i></button>
</div>
</section>
Here's my code in CodePen:
https://codepen.io/Krzysiek_39/pen/poNLbgx
This can probably be done with property border-radius: 50%;.
This is to look like on this website:
https://www.studiointerbit.pl/kontakt/
How do I make a circular effect with the left and right arrows?
I will be very grateful for effective help.
<div class="text">
<a class="refresh" title="A website refresh">Website</a>
</div>
<div class="menu">
<a>MENU</a>
</div>
<div class="slider_wrapper">
<div class="slider">
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?art" alt=""><span class="caption">Caption for slide 1</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?action" alt=""><span class="caption">Caption for slide 2</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?war" alt=""><span class="caption">Caption for slide 3</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?crime" alt=""><span class="caption">Caption for slide 4</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?drama" alt=""><span class="caption">Caption for slide 5</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?sci-fi" alt=""><span class="caption">Caption for slide 6</span>
</div>
</div>
<div class="slider_objects">
<div class="slider_btn prev_btn"><i class="fas fa-chevron-left fa-2x"></i></div>
<div class="slider_btn next_btn"><i class="fas fa-chevron-right fa-2x"></i></div>
<ul class="slider_list_wrapper">
<li class="slider_list active_slide"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
</ul>
</div>
</div>
You can use ::before selector, and style it accordingly, as per the needs.
$(document).ready(function() {
$('.refresh').click(function(e) {
location.reload();
});
});
//-----------------------------------------
var active_img_num = 0;
var slide_interval_time = 5;
var slide_during_time = 2;
var slide_fast_during_time = 2;
var slide_timer;
var num_of_img = 1;
var num_of_img_tag = 1;
var sliding_now = false;
$
(
function() {
var div_tag, a_tag, img, cap;
num_of_img_tag = $(".slider_img_wrapper").length
num_of_img = $(".slider_img_wrapper img").length;
active_img_num = adjust_img_num(active_img_num)["img_tags"];
for (var i = 0; i < num_of_img_tag; i++) {
$(".slider_img_wrapper").eq(adjust_img_num(active_img_num + (Math.pow(-1, i + 1)) * Math.ceil(i / 2))["img_tags"]).css("opacity", 1);
$(".slider_img_wrapper").eq(adjust_img_num(active_img_num + (Math.pow(-1, i + 1)) * Math.ceil(i / 2))["img_tags"]).css("transform", "translateX(" + (100 * Math.pow(-1, i + 1) * Math.ceil(i / 2)) + "%)");
}
next_img_num = adjust_img_num(active_img_num + 1)["img_tags"];
slide_timer = setInterval(slide, slide_interval_time * 1000);
$(".slider_list_wrapper li").removeClass("active_slide");
$(".slider_list_wrapper li").eq(active_img_num).addClass("active_slide");
$(".slider_list").css("transition", slide_during_time + "s");
}
);
function adjust_img_num(img_num) {
var result = [];
if (!$.isNumeric(img_num)) {
result["images"] = 0;
result["img_tags"] = 0;
} else if (img_num < 0) {
result["images"] = (num_of_img + (img_num % num_of_img)) % num_of_img;
result["img_tags"] = (num_of_img_tag + (img_num % num_of_img_tag)) % num_of_img_tag;
} else {
result["images"] = img_num % num_of_img;
result["img_tags"] = img_num % num_of_img_tag;
}
return result;
}
function search_direction(now_positon = 0, goal_position = 0) {
var i = 0;
while (true) {
if ((goal_position % num_of_img) == adjust_img_num(now_positon + i)["images"]) {
return {
"plus": true,
"target_num": adjust_img_num(now_positon + i)["img_tags"],
"move_value": i
};
} else if ((goal_position % num_of_img) == adjust_img_num(now_positon - i)["images"]) {
return {
"plus": false,
"target_num": adjust_img_num(now_positon - i)["img_tags"],
"move_value": -i
};
}
i++;
}
}
function slide(next_img = next_img_num, duration = slide_during_time, easing = "easeInOutCubic") {
$
(
function() {
next_img = adjust_img_num(next_img)["img_tags"];
if (sliding_now) {
return;
} else {
sliding_now = true;
}
var target_img_info = search_direction(active_img_num, next_img);
if (Math.abs(target_img_info["move_value"]) >= 2) {
move_images(active_img_num + (target_img_info["plus"] ? 1 : -1), next_img, slide_fast_during_time, "linear");
} else {
move_images(next_img, next_img, duration, easing);
}
function move_images(next_img, target_img = next_img, duration = slide_during_time, easing = "swing") {
var translateX_matrix = [];
$(".slider_img_wrapper").css("transition", duration + "s");
for (var i = 0; i < num_of_img_tag; i++) {
translateX_matrix = $(".slider_img_wrapper").eq(i).css("transform").slice(7, -1).split(",");
translateX_matrix[4] = parseInt(translateX_matrix[4]) - (target_img_info["move_value"]) * parseInt($(".slider_img_wrapper").css("width"));
$(".slider_img_wrapper").eq(i).css("transform", "matrix(" + translateX_matrix.join(",") + ")").css("left", "0%");
}
$(".slider_list_wrapper li").removeClass("active_slide");
$(".slider_list_wrapper li").eq(target_img % num_of_img).addClass("active_slide");
setTimeout
(
function() {
active_img_num = adjust_img_num(target_img)["img_tags"];
next_img_num = adjust_img_num(target_img + 1)["img_tags"];
$(".slider_img_wrapper").css("transition", "0s");
for (var i = 0; i < num_of_img_tag; i++) {
$(".slider_img_wrapper").eq(adjust_img_num(active_img_num + Math.pow(-1, i + 1) * Math.ceil(i / 2))["img_tags"]).css("opacity", 1);
$(".slider_img_wrapper").eq(adjust_img_num(active_img_num + Math.pow(-1, i + 1) * Math.ceil(i / 2))["img_tags"]).css("transform", "translateX(" + (100 * Math.pow(-1, i + 1) * Math.ceil(i / 2)) + "%)");
}
sliding_now = false;
},
duration * 1000
);
clearInterval(slide_timer);
slide_timer = setInterval(slide, slide_interval_time * 1000);
}
}
);
}
$(".slider_objects").on(
"click touchend",
".prev_btn",
function() {
clearInterval(slide_timer);
slide_timer = setInterval(slide, slide_interval_time * 1000);
slide(adjust_img_num(active_img_num - 1)["img_tags"]);
}
);
$(".slider_objects").on(
"click touchend",
".next_btn",
function() {
clearInterval(slide_timer);
slide_timer = setInterval(slide, slide_interval_time * 1000);
slide(adjust_img_num(active_img_num + 1)["img_tags"]);
}
);
$(document).on(
"click touchend",
".slider_list",
function() {
var clicked_num = $(".slider_list").index(this);
clicked_num = search_direction(active_img_num, clicked_num)["target_num"];
slide(clicked_num);
}
);
document.addEventListener(
'touchstart',
function(event) {
if (sliding_now) {
return;
}
event.preventDefault();
touch_x1 = event.changedTouches[0].pageX;
move_x_percent = 0;
clearInterval(slide_timer);
}, {
passive: false
}
);
document.addEventListener(
'touchmove',
function(event) {
if (sliding_now) {
return;
}
event.preventDefault();
touch_x2 = event.changedTouches[0].pageX;
move_x_percent = (touch_x1 - touch_x2) / window.innerWidth * 100;
if (false) {
$(".slider_img_wrapper").eq(adjust_img_num(active_img_num - 1)["img_tags"]).css("left", (-move_x_percent - 100) + "%");
$(".slider_img_wrapper").eq(active_img_num).css("left", (-move_x_percent) + "%");
$(".slider_img_wrapper").eq(adjust_img_num(active_img_num + 1)["img_tags"]).css("left", (-move_x_percent + 100) + "%");
}
for (var i = 0; i < num_of_img_tag; i++) {
$(".slider_img_wrapper").css("left", (-move_x_percent) + "%");
}
if (Math.abs(move_x_percent) >= 75) {
if (touch_x1 - touch_x2 > 0) {
slide(active_img_num + 1, slide_fast_during_time, "easeOutQuart");
} else {
slide(active_img_num - 1, slide_fast_during_time, "easeOutQuart");
}
touch_x1 = touch_x2;
}
}, {
passive: false
}
);
document.addEventListener(
'touchend',
function(event) {
if (sliding_now) {
return;
}
event.preventDefault();
touch_x3 = event.changedTouches[0].pageX;
if (Math.abs(move_x_percent) > 30) {
if (touch_x1 - touch_x2 > 0) {
slide(active_img_num + 1, slide_fast_during_time, "easeOutQuart");
} else {
slide(active_img_num - 1, slide_fast_during_time, "easeOutQuart");
}
} else {
slide(active_img_num, slide_fast_during_time, "easeOutQuart");
}
move_x_percent = 0;
}, {
passive: false
}
);
//-----------------------------------------
$(document).ready(function() {
var NavY = $('.menu-container').offset().top;
var stickyNav = function() {
var ScrollY = $(window).scrollTop();
if (ScrollY > NavY) {
$('.menu').addClass('sticky');
} else {
$('.menu').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
body {
background-color: #bdbdbd;
font-family: Verdana;
margin: 0;
position: relative;
height: 220vh;
z-index: -100;
}
.header-container {
background-color: #01579b;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
height: 20vh;
z-index: 4;
}
.header {
background-color: #191919;
position: absolute;
left: 5%;
margin-top: 20px;
}
.header .text a {
color: #77A0AC;
font-size: 31px;
padding: 0px 15px 0px;
text-decoration: none;
}
.text:hover {
cursor: pointer;
}
.menu-container {
position: absolute;
left: 5%;
right: 5%;
bottom: 0;
width: 90%;
}
.menu {
font-size: 16px;
}
.menu a {
background-color: #660066;
color: #76ff03;
text-align: center;
display: block;
margin: 0;
text-decoration: none;
}
.content {
left: 10%;
top: 15%;
right: 10%;
position: absolute;
}
.box {
background-color: #191919;
width: 100%;
position: absolute;
padding: 15px 15px 15px;
}
.slider_wrapper {
width: 100%;
height: 40vw;
overflow: hidden;
position: relative;
}
.slider {
position: absolute;
width: 100%;
}
.slider div {
overflow: hidden;
position: absolute;
width: 100%;
}
.slider img {
width: 100%;
height: 40vw;
}
.caption {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
color: #ffffff;
width: 100%;
font-size: 36px;
padding: 1.6rem;
cursor: default;
}
.slider_objects {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: default;
}
.slider_btn {
pointer-events: auto;
opacity: 0;
}
.slider:hover .slider_objects .slider_btn {
opacity: 1;
}
.slider_btn:hover {
background-color: #000000;
color: lime;
opacity: 1;
}
.slider_wrapper:hover .slider_btn {
opacity: 1 !important;
display: block !important;
}
.slider_btn:hover:after {
display: block;
position: absolute;
border-radius: 50%;
width: 10%;
height: 10%;
background: none !important;
}
.prev_btn,
.next_btn {
width: 10px;
height: 10px;
position: absolute;
top: calc(50% - 25px);
border-radius: 50%;
display: -webkit-flex;
display: -ms-flex;
display: flex;
justify-content: center;
-ms-align-items: center;
align-items: center;
z-index: 2;
background: none !important;
cursor: pointer;
}
.prev_btn::before,
.next_btn::before {
content: "";
background-color: #00000080;
border-radius: 50%;
position: absolute;
inset: 0 0;
z-index: -1;
transform: translate(-27.5%, -20%);
}
.prev_btn:hover::before,
.next_btn:hover::before {
background-color: #000;
}
.prev_btn {
color: #ffffff;
left: 50px;
}
.next_btn {
color: #ffffff;
right: 50px;
}
.slider_img_wrapper>a>img {
cursor: default;
}
.slider_list_wrapper {
width: calc(100% - 40px);
position: absolute;
bottom: 3vw;
display: -webkit-flex;
display: -ms-flex;
display: flex;
justify-content: center;
-ms-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style-type: none;
}
.slider_list {
width: 15px;
height: 15px;
margin: 5px 10px 0;
background-color: #323232;
border: 2px solid #ffffff;
border-radius: 50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-shadow: 0 0 3px 1px #000000;
cursor: pointer;
pointer-events: auto;
}
.active_slide {
background-color: #ffa500;
}
.sticky {
width: 90%;
position: fixed;
left: 5%;
top: 0;
z-index: 100;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://www.jqueryscript.net/css/jquerysctipttop.css">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/mobile-json-carousel/css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<body>
<div class="header-container">
<div class="header">
<div class="text">
<a class="refresh" title="A website refresh">Website</a>
</div>
</div>
<div class="menu-container">
<div class="menu">
<a>MENU</a>
</div>
</div>
</div>
<div class="content">
<div class="box">
<div class="slider_wrapper">
<div class="slider">
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?art" alt=""><span class="caption">Caption for slide 1</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?action" alt=""><span class="caption">Caption for slide 2</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?war" alt=""><span class="caption">Caption for slide 3</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?crime" alt=""><span class="caption">Caption for slide 4</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?drama" alt=""><span class="caption">Caption for slide 5</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?sci-fi" alt=""><span class="caption">Caption for slide 6</span>
</div>
</div>
<div class="slider_objects">
<div class="slider_btn prev_btn"><i class="fas fa-chevron-left fa-2x"></i></div>
<div class="slider_btn next_btn"><i class="fas fa-chevron-right fa-2x"></i></div>
<ul class="slider_list_wrapper">
<li class="slider_list active_slide"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
</ul>
</div>
</div>
</div>
</div>
</body>
I've jquery carousel(cycle2) and popup (lightgallery) and you will see my carousel on example and this example works very well and as I expect
$(document).ready(function(){
function generateSlider(){
$('.mySlideShow').cycle({
next: "#single-right",
pauseOnHover: true,
log: false,
pager: "#single-pager",
pagerTemplate: "<a href='#'><img src='{{src}}' width=48 height=48></a>",
prev: "#single-left",
slides: "img[data-hidden='false']"
});
}
generateSlider();
$(".filter li").on("click",function(){
var activeId = $(this).attr("id");
if(activeId == "show-all"){
$("img[data-id]").attr("data-hidden", "false");
} else {
$("img[data-id]").attr("data-hidden", "true");
$("img[data-id = '" + activeId + "']").attr("data-hidden", "false");
}
$('.mySlideShow').cycle('destroy');
generateSlider();
});
});
.single-gallery{
width:800px;
overflow:hidden;
position:relative;
}
.cycle-slideshow img {
width:100%;
height:494px;
max-width:100%;
}
#single-pager a img {
width: 49.3px !important;
height:49.3px !important;
border: 1px solid #fff;
}
#single-pager a.cycle-pager-active img {
opacity: 0.4;
}
#single-left,
#single-right {
position: absolute;
top: 50%;
z-index: 1000;
background: rgba(255, 255, 255, .8);
padding: 12px;
cursor: pointer;
}
#single-left {
left: 0;
}
#single-right {
right: 0;
}
.filter {
position: absolute;
z-index: 1000;
right: 0;
top:0;
padding: 0;
color: #FFF;
background: rgba(255, 255, 255, 0.6);
padding: 10px 30px;
}
.filter li {
list-style-type:none;
cursor: pointer;
display: inline-block;
background: rgba(0, 0, 0, .6);
padding: 5px;
}
img[data-hidden="true"]{
display: none;
}
<link href="https://cdn.jsdelivr.net/lightgallery/latest/css/lightgallery.css" rel="stylesheet"/>
<div class="single-gallery">
<div class="mySlideShow">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg" data-id="sports" data-hidden="false">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/sunny-day-lightbox.jpg" data-id="naturel" data-hidden="false">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-id="animals" data-hidden="false">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/sakura%20trees-lightbox.jpg" data-id="animals" data-hidden="false"/>
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" data-id="animals" data-hidden="false"/>
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" data-id="animals" data-hidden="false"/>
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" data-id="sports" data-hidden="false"/>
<div id="single-pager" class="center external"></div>
<div id="single-next-prev">
<span id="single-left">Prev</span>
<span id="single-right">Next</span>
</div>
</div>
<ul class="filter">
<li id="sports">Sports</li>
<li id="naturel">Naturel</li>
<li id="animals">Animals</li>
<li id="show-all">All</li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.9/js/lightgallery.min.js"></script>
but if I wrap my èach image with a than my filtering is not working as you see on example - please click to see example
I'm wondering what's wrong with my code ?
Okay, the pager got messed up, but here's what I got:
Change slides: to "a[data-hidden='false']"
Replace every instance of img to a in the .click function.
img[data-hidden="true"]{ display: none; to } to `a[data-hidden="true"]{ display: none; to }
replace pagerTemplate: "<a href='#'><img src='{{src}}' width=48 height=48></a>" with pagerTemplate: "<a href='#'><img src='{{children.0.src}}' width=48 height=48></a>"
$(document).ready(function() {
function generateSlider() {
$(".mySlideShow").cycle({
next: "#single-right",
log: false,
fx: "fade",
caption: ".cycle-caption",
captionTemplate: "{{title}}",
pauseOnHover: true,
pager: "#single-pager",
pagerTemplate: "<a href='#'><img src='{{children.0.src}}' width=60 height=60></a>",
prev: "#single-left",
slides: "a[data-hidden='false']"
});
}
generateSlider();
$(".filter li").on("click", function() {
var activeId = $(this).attr("id");
if (activeId == "show-all") {
$("a").attr("data-hidden", "false");
} else {
$("a").attr("data-hidden", "true");
$("a[data-id = '" + activeId + "']").attr("data-hidden", "false");
}
$(".mySlideShow").cycle("destroy");
generateSlider();
});
$(" .mySlideShow").lightGallery({
exThumbImage: "data-exthumbimage",
download: false,
thumbnail: true,
loadYoutubeThumbnail: true,
youtubeThumbSize: "default",
loadVimeoThumbnail: true,
vimeoThumbSize: "thumbnail_medium"
});
});
.single-gallery {
width: 800px;
overflow: hidden;
position: relative;
}
.cycle-slideshow img {
width: 100%;
height: 494px;
max-width: 100%;
}
#single-pager a img {
width: 49.3px !important;
height: 49.3px !important;
border: 1px solid #fff;
}
#single-pager a.cycle-pager-active img {
opacity: 0.4;
}
#single-left,
#single-right {
position: absolute;
top: 50%;
z-index: 1000;
background: rgba(255, 255, 255, .8);
padding: 12px;
cursor: pointer;
}
#single-left {
left: 0;
}
#single-right {
right: 0;
}
.filter {
position: absolute;
z-index: 1000;
right: 0;
top: 0;
padding: 0;
color: #FFF;
background: rgba(255, 255, 255, 0.6);
padding: 10px 30px;
}
.filter li {
list-style-type: none;
cursor: pointer;
display: inline-block;
background: rgba(0, 0, 0, .6);
padding: 5px;
}
a[data-hidden="true"] {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/lightgallery/latest/css/lightgallery.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.9/js/lightgallery.min.js"></script>
<div class="single-gallery" id="single-gallery">
<div class="single-gallery-carousel">
<div class="slideshow-area">
<ul class="filter">
<li id="sports">Sports</li>
<li id="naturel">Naturel</li>
<li id="animals">Animals</li>
<li id="show-all">All</li>
</ul>
</div>
<div class="mySlideShow">
<a data-exthumbimage="http://cdn.anitur.com.tr/resimler/normal/2014-02/tur_kuba_CP62I36hoYGMpFFRiN78.jpg" data-id="naturel" data-hidden="false" data-src="http://cdn.anitur.com.tr/resimler/normal/2014-02/tur_kuba_CP62I36hoYGMpFFRiN78.jpg">
<img src="https://sachinchoolur.github.io/lightGallery/static/img/12.jpg">
</a>
<a class="video" data-hidden="false" data-id="naturel" data-src="http://nerdist.com/wp-content/uploads/2016/06/The-Evolution-of-Pixar.jpg" href="https://vimeo.com/1084537">
<img src="http://nerdist.com/wp-content/uploads/2016/06/The-Evolution-of-Pixar.jpg">
</a>
<a data-exthumbimage="http://betacontent.anitur.com.tr/web/images/h494/2017-03/otel_aurum-didyma-spa-beach-resort_sReNOBXcinbZI7lNGf3x.jpg" data-hidden="false" data-id="naturel" data-src="http://betacontent.anitur.com.tr/web/images/h494/2017-03/otel_aurum-didyma-spa-beach-resort_sReNOBXcinbZI7lNGf3x.jpg">
<img src="http://betacontent.anitur.com.tr/web/images/h494/2017-03/otel_aurum-didyma-spa-beach-resort_sReNOBXcinbZI7lNGf3x.jpg">
</a>
<a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" data-hidden="false" data-id="animals" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg">
</a>
<a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg" data-hidden="false" data-id="sports" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg"></a>
<a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-hidden="false" data-id="sports" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg"></a>
<a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-hidden="false" data-id="sports" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg"></a>
<a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" data-hidden="false" data-id="animals" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg">
</a>
<a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" data-hidden="false" data-id="sports" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg">
</a>
</div>
</div>
<div class="center external" id="single-pager">
</div>
</div>
<div id="single-next-prev">
<span class="ani-icon-chevron-pointing-to-the-left ani-cycle-control" id="single-left"></span> <span class="ani-icon-right-chevron ani-cycle-control" id="single-right"></span>
</div>
</div>
CodePen
Here is the JSfiddle http://jsfiddle.net/zfxrxzLg/ Look at this for full code
Why does the last picture collapses underneath, and isn't hidden as it should be? I'm trying to create a slider. I'm thinking that might be the issue why the slider isn't working.
HTML
<div class="gallery-wrap">
<div class="gallery clearfix">
<div class="gallery__item">
<img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
</div>
<div class="gallery__item">
<img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
</div>
<div class="gallery__item">
<img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
</div>
<div class="gallery__item">
<img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
</div>
<div class="gallery__item">
<img src="http://gallery.photo.net/photo/8439353-md.jpg" class="gallery__img" alt="" />
</div>
CSS
.gallery-wrap {
margin: 0 auto;
overflow: hidden;
width: 432px;
}
.gallery {
position: relative;
left: 0;
top: 0;
}
.gallery__item {
float: left;
list-style: none;
margin-right: 20px;
}
.gallery__img {
display: block;
border: 4px solid #40331b;
height: 80px;
width: 80px; }
.gallery__controls { margin-top: 10px; }
.gallery__controls-prev { cursor: pointer; float: left; }
.gallery__controls-next { cursor: pointer; float: right; }
.clearfix:after{
content: '.';
clear: both;
display:block;
height: 0;
visibility: hidden;
}
JavaScript
$(window).load(function(){
$(".gallery__link").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
var totalWidth = 0;
$(".gallery__item").each(function(){
totalWidth = totalWidth + $(this).outerWidth(true);
});
var maxScrollPosition = totalWidth - $(".gallery-wrap").outerWidth();
function toGalleryItem($targetItem){
if($targetItem.length){
var newPosition = $targetItem.position().left;
if(newPosition <= maxScrollPosition){
$targetItem.addClass("gallery__item--active");
$targetItem.siblings().removeClass("gallery__item--active");
$(".gallery").animate({
left : - newPosition
});
} else {
$(".gallery").animate({
left : - maxScrollPosition
});
};
};
};
$(".gallery").width(totalWidth);
$(".gallery__item:first").addClass("gallery__item--active");
$(".gallery__controls-prev").click(function(){
var $targetItem = $(".gallery__item--active").prev();
toGalleryItem($targetItem);
});
$(".gallery__controls-next").click(function(){
var $targetItem = $(".gallery__item--active").next();
toGalleryItem($targetItem);
});
});
few corrections and additions:
.gallery__item {
display: inline-block;
list-style: outside none none;
margin-right: 20px;
}
.gallery {
left: 0;
overflow: hidden;
position: relative;
top: 0;
white-space: nowrap;
}
The slider/carousel I'm trying to implent is this: http://www.paulwelsh.info/jquery-plugins/hero-carousel/
I know that I have to add HTML code for it, which I am unable to due to little experience with designing websites (started my course around a month ago). Can you help me with the HTML code I am supposed to add to get this to work? This is my HTML, CSS & Javascript. The HTML is what I THINK it should look like, which is obviously wrong.
HTML
<div class="what here?">
<ul class="and what here?">
anything here?
<li><img src="images/deadmau5/slide1.jpg" ></li>
<li><img src="images/deadmau5/slide2.jpg" ></li>
<li><img src="images/deadmau5/slide3.jpg" ></li>
<li><img src="images/deadmau5/slide4.jpg" ></li>
</ul>
</div>
CSS
.hero {
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 48px;
}
.hero-carousel article {
width: 980px;
margin: 0 auto;
height: 480px;
display: block;
float: left;
position: relative;
}
.hero-carousel-container article {
float: left;
}
.hero-carousel article img{
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.hero-carousel article .contents {
position: relative;
z-index: 2;
top: 72px;
left: 48px;
list-style: none;
color: #000;
width: 556px;
padding: 20px;
background: rgba(255,255,255,0.8);
-pie-background: rgba(255,255,255,0.8);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
behavior: url(/assets/PIE.htc);
}
.hero-carousel-nav {
width: 980px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -490px;
z-index: 2;
}
.hero-carousel-nav li {
position: absolute;
bottom: 48px;
right: 48px;
list-style: none;
}
.hero-carousel-nav li.prev {
left: 48px;
right: auto;
}
.hero-carousel-nav li a {
background: #D21034;
color: #fff;
border: none;
outline: none;
display: block;
float: left;
padding: 5px 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
behavior: url(/assets/PIE.htc);
}
.hero-carousel-nav li a:hover {
background: #89051C;
}
.hero-carousel-nav li a:active,
.hero-carousel-nav li a:focus {
border: none;
outline: none;
}
Javascript
jQuery.fn.heroCarousel=function(a){a=jQuery.extend({animationSpeed:1000,navigation:true,easing:"",timeout:5000,pause:true,pauseOnNavHover:true,prevText:"Previous",nextText:"Next",css3pieFix:false,currentClass:"current",onLoad:function(){},onStart:function(){},onComplete:function(){}},a);if(jQuery.browser.msie&&parseFloat(jQuery.browser.version)<7){a.animationSpeed=0}return this.each(function(){var k=jQuery(this),b=k.children();currentItem=1;childWidth=b.width();childHeight=b.height();if(b.length>2){b.each(function(m){if(a.itemClass){jQuery(this).addClass(a.itemClass)}});b.filter(":first").addClass(a.currentClass).before(b.filter(":last"));var d=Math.round(childWidth*k.children().length),l="-"+Math.round(childWidth+Math.round(childWidth/2))+"px";k.addClass("hero-carousel-container").css({position:"relative",overflow:"hidden",left:"50%",top:0,"margin-left":l,height:childHeight,width:d});k.before('<ul class="hero-carousel-nav"><li class="prev">'+a.prevText+'</li><li class="next">'+a.nextText+"</li></ul>");var e=k.prev(".hero-carousel-nav"),h;if(a.timeout>0){var j=false;if(a.pause){k.hover(function(){j=true},function(){j=false})}if(a.pauseOnNavHover){e.hover(function(){j=true},function(){j=false})}function c(){if(!j){e.find(".next a").trigger("click")}}h=window.setInterval(c,a.timeout)}e.find("a").data("disabled",false).click(function(p){p.preventDefault();var m=jQuery(this),n=m.parent().hasClass("prev"),o=k.children();if(m.data("disabled")===false){a.onStart(k,e,o.eq(currentItem),a);if(n){f(o.filter(":last"),"previous")}else{f(o.filter(":first"),"next")}m.data("disabled",true);setTimeout(function(){m.data("disabled",false)},a.animationSpeed+200);if(a.timeout>0){window.clearInterval(h);h=window.setInterval(c,a.timeout)}}});function f(m,q){var o=parseFloat(k.position().left),n=parseFloat(k.css("margin-left"));if(q==="previous"){m.before(m.clone().addClass("carousel-clone"));k.prepend(m);var p=Math.round(n-childWidth);var r="+="}else{m.after(m.clone().addClass("carousel-clone"));k.append(m);var p=l;var r="-="}if(a.css3pieFix){g(jQuery(".carousel-clone"))}k.css({left:o,width:Math.round(d+childWidth),"margin-left":p}).animate({left:r+childWidth},a.animationSpeed,a.easing,function(){k.css({left:"50%",width:d,"margin-left":n});jQuery(".carousel-clone").remove();i()})}function g(n){var m=n.attr("_pieId");if(m){n.attr("_pieId",m+"_cloned")}n.find("*[_pieId]").each(function(o,p){var q=$(p).attr("_pieId");$(p).attr("_pieId",q+"_cloned")})}function i(){var m=k.children();m.removeClass(a.currentClass).eq(currentItem).addClass(a.currentClass);a.onComplete(k,k.prev(".hero-carousel-nav"),m.eq(currentItem),a)}if(jQuery.browser.msie){e.find("a").attr("hideFocus","true")}a.onLoad(k,e,k.children().eq(currentItem),a)}})};
Embed these resources from the sample page that you provided:
<link rel="stylesheet" media="all" href="jquery.heroCarousel.css" type="text/css" />
<script type='text/javascript' src='jquery.heroCarousel-1.3.js'></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
Then follow this HTML Structure:
<div class="hero">
<div class="hero-carousel">
<article><img src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" >
</article>
<article>
<img src="http://www.deadmau5.com/wp-content/uploads/2012/06/telemiss_website_banner2.jpg" >
</article>
<article>
<img src="http://www.deadmau5.com/wp-content/uploads/2012/06/ATGH_deadmau5.com_1.jpg" >
</article>
<article>
<img src="http://www.deadmau5.com/wp-content/uploads/2012/05/deadmau5-web-banner-1.jpg" >
</article>
</div>
Then add this javascript code to the end of your site:
$(document).ready(function(){
$('.hero-carousel').heroCarousel({
css3pieFix: true
});});
DEMO: http://jsfiddle.net/dCYB7/1/, http://fiddle.jshell.net/dCYB7/1/show/
EDIT:
The entire slider in one HTML+CSS+Javascript collection:
<style>
#slider { width:100%; overflow:hidden; height:372px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-bg.png); margin-bottom:25px; }
#slider-container { height:352px; width:950px; margin:auto; padding-top:10px; position:relative; }
#slider-inner { width:10000px; height:352px; position:absolute; top:10px; left:-970px; }
.slide { width:938px; height:340px; border:6px solid #000; float:left; margin-right:20px; position:relative; }
#slider-arrow-left { display:block; width:115px; height:124px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/large-arrow-left.png); position:absolute; left:-53px; top:120px; z-index:999; } #slider-arrow-left:hover { background-position:0 -124px; }
#slider-arrow-right { display:block; width:115px; height:124px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/large-arrow-right.png); position:absolute; right:-53px; top:120px; z-index:999; } #slider-arrow-right:hover { background-position:0 -124px; }
#slider-fade-left { display:block; height:372px; width:300px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-fade-left.png); position:absolute; left:-320px; top:0px; z-index:2; }
#slider-fade-left:hover { opacity:0.92; }
#slider-fade-right { display:block; height:372px; width:300px; background-image:url(http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-fade-right.png); position:absolute; right:-320px; top:0px; z-index:2; }
#slider-fade-right:hover { opacity:0.92; }
#slider-black-left { height:372px; width:1000px; position:absolute; top:0px; left:-1300px; background-color:#0c100f; }
#slider-black-right { height:372px; width:1000px; position:absolute; top:0px; right:-1300px; background-color:#0c100f; }
</style>
<div id="slider">
<div id="slider-container">
<div id="slider-inner">
<div class="slide">
<a target="_blank" href="http://www.youtube.com/watch?v=Mz8sQSEUGn4"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" /></a> </div>
<div class="slide">
<a target="_blank" href="http://bzz.is/heapmau5"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/telemiss_website_banner2.jpg" /></a> </div>
<div class="slide">
<a target="_blank" href="http://smarturl.it/albumtitlegoeshere"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/ATGH_deadmau5.com_1.jpg" /></a> </div>
<div class="slide">
<a target="_blank" href="http://bzz.is/neffmau5"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/05/deadmau5-web-banner-1.jpg" /></a> </div>
<div class="slide">
<a target="_blank" href="http://www.youtube.com/watch?v=Mz8sQSEUGn4"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" /></a> </div>
<div class="slide">
<a target="_blank" href="http://bzz.is/heapmau5"><img alt="deadmau5 Banner" src="http://www.deadmau5.com/wp-content/uploads/2012/06/telemiss_website_banner2.jpg" /></a> </div>
</div>
<span id="slider-arrow-left"></span>
<span id="slider-arrow-right"></span>
<span id="slider-fade-left"></span>
<span id="slider-fade-right"></span>
<div id="slider-black-left"></div>
<div id="slider-black-right"></div>
<div id="hearts">
<span class="heart"></span>
<span class="heart"></span>
<span class="heart"></span>
<span class="heart"></span>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function slideLeft(evt) {
evt.preventDefault();
clearInterval(refreshId);
unbindAll();
var oldOrb = jQuery.data(document.body, 'activeOrb');
var newOrb = oldOrb - 1; if (newOrb < 1) { newOrb = 4; }
jQuery.data(document.body, 'activeOrb', newOrb);
orbChange(newOrb);
$('#slider-inner').animate({
left: '+=970'
}, 600, 'easeOutQuart', function() {
var me = $(this);
var p = me.position();
if (p.left > -10) { me.css('left', '-3880px'); }
bindAll();
});
}
function slideRight(evt) {
evt.preventDefault();
clearInterval(refreshId);
unbindAll();
var oldOrb = jQuery.data(document.body, 'activeOrb');
oldOrb = parseInt(oldOrb);
var newOrb = oldOrb + 1; if (newOrb > 4) { newOrb = 1; }
jQuery.data(document.body, 'activeOrb', newOrb);
orbChange(newOrb);
$('#slider-inner').animate({
left: '-=970'
}, 600, 'easeOutQuart', function() {
var me = $(this);
var p = me.position();
if (p.left < -4840) { me.css('left', '-970px'); }
bindAll();
});
}
function slideRight2() {
var oldOrb = jQuery.data(document.body, 'activeOrb');
var newOrb = oldOrb + 1; if (newOrb > 4) { newOrb = 1; }
jQuery.data(document.body, 'activeOrb', newOrb);
orbChange(newOrb);
$('#slider-inner').animate({
left: '-=970'
}, 600, 'easeOutQuart', function() {
var me = $(this);
var p = me.position();
if (p.left < -4840) { me.css('left', '-970px'); }
});
}
function slideTo(evt) {
evt.preventDefault();
clearInterval(refreshId);
unbindAll();
var oldOrb = jQuery.data(document.body, 'activeOrb');
var newOrb = $(this).attr('id'); newOrb = newOrb.substr(5,6);
jQuery.data(document.body, 'activeOrb', newOrb);
orbChange(newOrb);
var To;
if (newOrb == 1) { To = -970; } if (newOrb == 2) { To = -1940; } if (newOrb == 3) { To = -2910; } if (newOrb == 4) { To = -3880; }
$('#slider-inner').animate({
left: To
}, 600, 'easeOutQuart', function() {
bindAll();
});
}
function orbChange(orb) {
$('.heart-active', '#hearts').removeClass('heart-active');
$('#heart' + orb + ' span').addClass('heart-active');
}
function bindAll() {
$('#slide-left').bind('click', slideLeft);
$('#slide-right').bind('click', slideRight);
$('#slide-left-fade').bind('click', slideLeft);
$('#slide-right-fade').bind('click', slideRight);
$('#hearts a').bind('click', slideTo);
}
function unbindAll() {
$('#slide-left').unbind('click', slideLeft);
$('#slide-right').unbind('click', slideRight);
$('#slide-left-fade').unbind('click', slideLeft);
$('#slide-right-fade').unbind('click', slideRight);
$('#hearts a').unbind('click', slideTo);
}
var refreshId = setInterval(function() {
slideRight2();
}, 6000);
bindAll();
});
</script>
Live DEMO | CODE
add width and margin 0 auto in .hero class
.hero {
position: relative;
overflow: hidden;
margin-bottom: 48px;
margin: 0 auto;
width: 960px;
}