I created a thumbnail slider with bxSlider pagerCustom. Thumbnails do not fit in the slider. I need to make the thumbnails a carousel.
I have 15 pictures and 15 thumbnails for them and the picture slide works like a carousel and I need the thumbnails to work the same way
How should I do it?
`js
$(document).ready(function() {
jQuery('.bxslider').bxSlider({
nextText: '',
prevText: '',
pagerCustom: '#bx-pager',
});
});
`
<div class="product3_slider">
<div class="slider3">
<ul class="bxslider">
<li><img src="https://static.mikrotik.group/image/trm240.jpg" /></li>
<li><img src="https://static.mikrotik.group/image/trm240back.jpg" /></li>
</ul>
</div>
<div id="bx-pager">
<a data-slide-index="0" href=""><img src="https://static.mikrotik.group/image/trm240small.jpg" /></a>
<a data-slide-index="1" href=""><img src="https://static.mikrotik.group/image/trm240backsmall.jpg"/></a>
</div>
</div>
I tried to find examples where there are a lot of pictures with thumbnails, but I did not find such examples.
Related
I have a gallery with thumbnails,
After I hover on thumbnail the main photo is changing to the hovered one.
But I need help with magnifying the main photo.
I tried many free magnify scripts but none of them worked well.
Always when I hovered on any other thumbnail and then again on the main photo it showed the previous one or didn't work.
HTML
<div class="imgBox"><a href="big/default1.png">
<img src="small/default1small.png" class="zoom"/>
</a></div>
<ul class="thumb">
<li>
<a onclick="return false" target="imgBox" href="small/default1small.png">
<img src="small/default1small.png"/>
</a>
</li>
<li>
<a onclick="return false" target="imgBox" href="small/default2small.png">
<img src="small/default2small.png"/>
</a>
</li>
</ul>
JS with JQUERY
$(document).ready(function(){ $('.thumb a').mouseover(function(e){
e.preventDefault();
$('.imgBox img').attr("src", $(this).attr("href"));
$('.imgBox a').attr("href", $(this).attr("href"));
$('.imgBox a .magnify .magnify-lens').css("background","url('$(this)') 0px 0px no-repeat");
})
})
After I hover on thumbnail and again hover on the main photo I expect it to magnify properly
https://codepen.io/anon/pen/zgxaRX
I want to create product list page and mouseover gallery like [this page][1]
I tried with vertical carousel like that Fiddle
But it is not working like Zalando and jcarousel is not working 1.9.1+ jQuery version. I need a structure that works like Zalando.
Here we are! I've encapsulated your entire product (lets call it .product-item) in a <div> so when hovering the main image (or the other options when visible) you can toggle the visibility of the options:
Make the options hidden by default (CSS):
#name-carousel {
float: left;
display: none;
}
Encapsulate your product in a container (HTML):
<div class="product-item"> <!-- This is the container -->
<div id="name-carousel" class="container">
<ul id="mycarousel" class="jcarousel-skin-tango">
<li id="carousel-selector-1"><img src="http://placehold.it/100x50&text=slide1" /></li>
<li id="carousel-selector-2"><img src="http://placehold.it/100x50&text=slide2" /></li>
<li id="carousel-selector-3"><img src="http://placehold.it/100x50&text=slide3" /></li>
<li id="carousel-selector-4"><img src="http://placehold.it/100x50&text=slide4" /></li>
<li id="carousel-selector-5"><img src="http://placehold.it/100x50&text=slide5" /></li>
</ul>
</div>
<div class="bigProductimage">
<img data-img="http://placehold.it/400x200&text=slide0" src="http://placehold.it/400x200&text=slide0">
</div>
</div>
Toggle the options visibility when hovering (jQuery):
productItem.hover(function() {
$("#name-carousel").fadeToggle();
});
Here is the updated fiddle for you: http://jsfiddle.net/CliffBurton/6svy9ocy/3/
Hi I have a bxslider which is in a transformed/scaled container. How can I correct the calculation of the slide position. It seems like a normal reload doesn't affect the calculation when its container is scaled.
//EDIT: I found out that this problem effects not the fade mode of the bxslider, so this could be a workaround...
How can the horizontal mode of the bxslider be fix, when the whole container got scaled down?
See my example: http://jsfiddle.net/wittich/umgwrh3b/
HTML
<div class="container">
<ul class="bxslider">
<li><img src="http://bxslider.com/images/730_200/hill_road.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
</ul>
<ul class="bxslider">
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/hill_road.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/trees.jpg" /></li>
</ul>
</div>
<p>Click to reload slider</p>
JS
jQuery(document).ready(function(){
var sliders = [];
jQuery('.bxslider').each(function(i,item){
var slider = $(this);
slider.bxSlider({
auto: true,
mode: 'horizontal'
});
sliders[i] = slider;
});
$('.container').css('transform', 'scale(0.8)');
$(sliders).each(function(){
this.reloadSlider();
});
$('#reload-slider').click(function(e){
e.preventDefault();
$(sliders).each(function(){
this.reloadSlider();
});
});
});
My anythingSlider looks like this
<link rel="stylesheet" href="http://css-tricks.github.com/AnythingSlider/css/theme-metallic.css">
<div id="externalNav">
Goto One |
Two |
Three |
Four
</div>
<br><br>
<ul id="slider">
<li><img src="http://placekitten.com/300/200" alt="" /></li>
<li><img src="http://placehold.it/300x200" alt="" /></li>
<li><img src="http://placebear.com/300/200" alt="" /></li>
<li><img src="http://lorempixel.com/300/200" alt="" /></li>
<li><img src="http://placedog.com/300/200" alt="" /></li>
</ul>
$('#slider').anythingSlider({
// If true, builds a list of anchor links to link to each panel
buildNavigation: false,
autoPlay: true
});
When autoplay happens and first slide is active I want to add a class to One (and so on for next slides) so that I can show it as selected. Can any one point out what is the correct approach to make this?
JsFiddle
The AnythingSlider Wiki has just the example you wanted:
Custom, external navigation controls (with updating "cur" class)
var nav = $('#externalNav a'),
updateNav = function(page){
nav
.removeClass('cur')
.eq(page).addClass('cur');
}
$('#slider').anythingSlider({
// If true, builds a list of anchor links to link to each panel
buildNavigation: false,
onInitialized: function(e, slider) {
updateNav(slider.currentPage-1);
},
// Callback before slide animates
onSlideBegin: function(e, slider) {
updateNav(slider.targetPage-1);
}
});
// set up external links
nav.click(function(){
var slide = $(this).attr('href').substring(1);
$('#slider').anythingSlider(slide);
return false;
});
Demo: http://jsfiddle.net/Mottie/ycUB6/76/
I'm trying to create a simple slider
I have main images and thumbnails
I want to animate the thumbnails container to the right position, put i don't want to use integer i want to use width value from a variable
My HTML code is some thing like that
<div class="Slider" >
<ul class="main-image">
<li><img src="images/gal-1.jpg" alt=""/></li>
<li><img src="images/gal-2.jpg" alt=""/></li>
<li><img src="images/gal-3.jpg" alt=""/></li>
</ul>
<div class="thumbnails-holder">
<a class="prev"></a>
<div class="thumbnails-items">
<a class="thumbnails-item">
<img src="images/gal-1.jpg" alt=""/>
</a>
<a class="thumbnails-item">
<img src="images/gal-2.jpg" alt=""/>
</a>
<a class="thumbnails-item">
<img src="images/gal-3.jpg" alt=""/>
</a>
</div>
<a class="next"></a>
</div>
</div>
My J query code
var ThumbWidth = parseInt($(".thumbnails-item").width());
$(".next").click(function(){
$(this).parents().find(".thumbnails-items").animate({
right: '-=95'
})
})
is there a way to write it like right: '-=ThumbWidth'
var ThumbWidth = parseInt($(".thumbnails-item").width());
$(".next").click(function() {
$(this).parents().find(".thumbnails-items").animate({
right: '-=' + ThumbWidth
});
});