I have a carousel slider,
when I click on a thumb an image needs to be loaded in the large banner.
How can I do this?
It needs to be smooth, it shows a large image, when clicking on a thumb that thumb needs to fade-in over the existing image. But first I need to get it working thow.
Example here
New other example is here!
<div class="big">
<img src="http://placehold.it/476x300&text=first" />
<img src="http://placehold.it/476x300&text=sec" />
<img src="http://placehold.it/476x300&text=third" />
<img src="http://placehold.it/476x300&text=four" />
<img src="http://placehold.it/476x300&text=five" />
</div>
<div class="owl-carousel small">
<div class="item">
<img src="http://placehold.it/238x150&text=first" />
</div>
<div class="item">
<img src="http://placehold.it/238x150&text=sec" />
</div>
<div class="item">
<img src="http://placehold.it/238x150&text=third" />
</div>
<div class="item">
<img src="http://placehold.it/238x150&text=four" />
</div>
<div class="item">
<img src="http://placehold.it/238x150&text=five" />
</div>
</div>
script:
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
responsiveClass: true,
responsive: {
0: {
items: 2,
nav: false
},
600: {
items: 3,
nav: false
},
1000: {
items: 4,
nav: false,
loop: false,
margin: 20
}
}
})
})
You need to attach an event handler to each image,
I see you are loading jQuery which makes this nice and easy
$(function(){
$(".big img:eq(0)").nextAll().hide();
$(".es-slides .es-slide-inner img").click(function(e){
var index = $(this).index();
$(".big img").eq(index).show().siblings().hide();
});
$('#basic_slider img').each(function(i,image){
$(image).on('click', function(){
$('.big').html('<img src=\''+ image.src + '\'/>');
});
});
});
We are using the jQuery each method to loop through each image in the carousel, then update the html inside the with an image tag that has the correct src for the image.
Alternatively you could show/hide the images in the .big container like your html already shows. This will probably work better for fading the images in and out as you wish.
Fiddle
Related
I'm using the slick slider nav, but I want to hide the current slide in the nav slider.
Currently you can see the current slide image at the top, but you can also see that same image at the start of the nav slider. I want to hide this image though, so that the slider nav will only show the next images, not the current.
Any idea if this is possible?
Codepen for reference.
<div class="container">
<div class="row">
<div class="col">
<div class="main-slider">
<img src="https://images.freeimages.com/images/large-previews/76e/abstract-1-1174741.jpg" alt="">
<img src="https://images.freeimages.com/images/large-previews/a31/colorful-umbrella-1176220.jpg" alt="">
<img src="https://images.freeimages.com/images/large-previews/aaf/abstract-paper-free-photo-1175904.jpg" alt="">
<img src="https://images.freeimages.com/images/large-previews/4d6/chugh-1171409.jpg" alt="">
<img src="https://images.freeimages.com/images/large-previews/655/glass-abstract-1501217.jpg" alt="">
</div>
<div class="nav-slider">
<img src="https://images.freeimages.com/images/large-previews/76e/abstract-1-1174741.jpg" alt="">
<img src="https://images.freeimages.com/images/large-previews/a31/colorful-umbrella-1176220.jpg" alt="">
<img src="https://images.freeimages.com/images/large-previews/aaf/abstract-paper-free-photo-1175904.jpg" alt="">
<img src="https://images.freeimages.com/images/large-previews/4d6/chugh-1171409.jpg" alt="">
<img src="https://images.freeimages.com/images/large-previews/655/glass-abstract-1501217.jpg" alt="">
</div>
</div>
</div>
</div>
// Gallery - Synced sliders
$(".main-slider").slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: ".nav-slider",
});
// Gallery - Nav slider
$(".nav-slider").slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: ".main-slider",
dots: false,
arrows: true,
focusOnSelect: true,
});
Slick adds the slick-current class to the current slide.
So just add this to your CSS style:
.nav-slider .slick-current {
display: none;
}
I am using the Slider from Ratchet css, which as far as I know does nothing as far as auto scrolling goes.
Here is the code:
<div class="slider" id="mySlider">
<div class="slide-group">
<div class="slide">
<img src="/assets/img/slide-1.jpg">
<span class="slide-text">
<span class="icon icon-left-nav"></span>
Slide me
</span>
</div>
<div class="slide">
<img src="/assets/img/slide-2.jpg">
</div>
<div class="slide">
<img src="/assets/img/slide-3.jpg">
</div>
</div>
</div>
What I need to do is either with js or css or both have the images scrolling every few seconds.
How can I do this?
Looking into the sliders.js it is based off
https://github.com/thebird/Swipe
So a function like this could work, it might need some tweaking.
window.mySwipe = new Swipe(document.getElementById('slider'), {
startSlide: 2,
speed: 400,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function(index, elem) {},
transitionEnd: function(index, elem) {}
});
I am using slick.js on my website to show testimonials on my homepage.
When the user is on a mobile device, I want to copmpletely remove the testimonial part. This has the requirement that the images in the slick should not have been loaded already!
This is my code to build the slick :
<div class="quote-carousel">
<div class="quote-wrapper">
<?php if(isset($data['carousel_title'])){ ?>
<h3 class="text-center m-b-2"><?php echo $data['carousel_title'];?></h3>
<?php } ?>
<div class="slick-wrapper">
<div id="slick-single" data-slick='{"autoplaySpeed": 6000}' >
<?php foreach ($testimonial_items as $item) { ?>
<div class="quote-item">
<div class="container">
<div class="row">
<div class="col-md-4 person text-center">
<?php if(isset($item->user_id)){ ?>
<img
alt="Testimonial <?=$item->name?>"
src="<?=base_url()?>design/img/testimonials/<?=$item->image?>"
/>
<p class="name"><?=$item->name?></p>
<p class="function"><?=$item->function?><?php if(isset($item->name_partner)){?> @ <span class="entity"><?=$item->name_partner?></span><?php } ?></p>
</div>
<div class="col-md-8 align-self-center">
<blockquote class="font-medium-3"><span><?=$item->message?></span></blockquote>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
And javascript looks like this:
var slickSingle = $('#slick-single');
slickSingle.slick({
dots: true,
lazyLoad: 'ondemand',
infinite: true,
speed: 300,
autoplay: true,
responsive: [
{
breakpoint: 768,
settings: {
arrows: true,
slidesToShow: 1
}
},
{
breakpoint: 480,
settings: {
arrows: false,
slidesToShow: 1
}
}
]
});
1) I have tried playing around with changing the img tags to div's and setting the image as a background-image via CSS, combined with the styles that slick add's to the img tag, as an inline style element to the div. However this did not work since Slick adds too many stuff all over the place. (plus: this is also not SEO friendly).
2) Another option i've been playing with is changing the element to a element like so:
<picture>
<source srcset="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" media="(max-width: 768px)">
<img
alt="Testimonial <?=$item->name?>"
src="<?=base_url()?>design/img/testimonials/<?=$item->image?>"
/>
</picture>
However, it is still not ideal since it will still download the 1x1 to the browser. (But at least it's better I think?)
3) The third option I see is to use AJAX and create the complete slider in javascript. However I think this is quite complex and i'm not sure whether it will be worse for desktop users (performance wise) ?
I am trying to set an owl carousel on my landing page . It works fine when i browse it from my working directory . But when i upload it on server (even in local server) it set display:none in css .
I tried changing css and js files but it is not working .
here is my code ---
$(document).ready(function(){
jQuery("#main-slider").owlCarousel({
autoplay:true,
loop:true,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
items:1,
margin:30,
stagePadding:30,
smartSpeed:450
});
});
<div id="main-slider" class="owl-carousel owl-theme">
<div class="item">
<img src="img/slider.jpg" alt="" />
</div>
<div class="item">
<img src="img/slider2.jpg" alt="" />
</div>
<div class="item">
<img src="img/slider3.jpg" alt="" />
</div>
</div>
If you've used #main-slider id more than once on this page you can get error. Use it once.
I'm using bxSlider to run a slideshow. I needed to use external captions, which I did by broadly following this answer.
This is working well for the caption itself, but I also want to change the URL that each caption's link goes to.
I've made an attempt at hacking this together myself using the caption code as inspiration, and various answers from this thread, but I've hit a wall of not knowing what I'm doing.
Code is below, does anybody have any suggestions? I'm sure it's super basic but I just don't JavaScript, which means I'm missing lots of core concepts that would allow me to work this out myself.
<div class="bxslider">
<div class="slide id-0">
<img src="/images/index-01.jpg" title="Caption 1" />
</div>
<div class="slide id-1">
<img src="/images/index-02.jpg" title="Caption number two" />
</div>
<div class="slide id-2">
<img src="/images/index-03.jpg" title="Third caption" />
</div>
</div>
<div class="caption-1">
<div class="cap-cont">
<div class="cap-text"><div class="slider-txt"></div></div>
<a class="box-link">Find out more</a>
</div>
</div>
<script type="text/javascript">
$('.bxslider').bxSlider({
auto: true,
speed: 2000,
pause: 6000,
pager: false,
controls: true,
responsive:true,
onSliderLoad: function(currentIndex) {
var slideNum = '.id-' + currentIndex;
$(".slider-txt").html($('.bxslider .slide' + slideNum).find("img").attr("title"));
$(".link-txt").html($('.bxslider .slide' + slideNum).find("a").attr("href"));
},
onSlideAfter: function($slideElement, oldIndex, newIndex) {
$(".slider-txt").html($slideElement.find("img").attr("title"));
$(".link-txt").html($slideElement.find("a").attr("href"));
$("a.link-txt").attr("href", "http://cupcream.com");
}
});
</script>