Multiple bx-slider with single pager manage all in javascript - javascript

Want to manage the 3 slider with same pager
i had tried this code but its not Working
<script language="javascript">
$('.mobile_left_mble,.mobile_right_mble,.text_btn').bxSlider({
//pagerCustom: '#bx-pager',
pager:true,
controls: false,
touchEnabled : true,
mode: 'fade',
easing: 'swing',
auto :true,
});
$('.mobile_left_mble,.mobile_right_mble').each(function(i){
alert (i);
slider_array[i] = $(this).bxSlider({pager:false});
});
</script>

Here is what I would do. First of all, in my JS file I would initialize all my 3 elements, in this case 'mobile_left_mble, mobile_right_mble and text_btn' with a unique BxSlider call. I would store each call in three unique variables.
var mySlider1;
var mySlider2;
var mySlider3;
jQuery(document).ready(function($){
mySlider1 = $('.mobile_left_mble').bxSlider({
pager:false
});
mySlider2 = $('.mobile_right_mble').bxSlider({
pager:false
});
mySlider3 = $('.text_btn').bxSlider({
pager:false
});
});
Once this is done, you can create your custom pager in your HTML file. Each pager-item, whether they be 'li, a href , div' (you decide), will need to have an indication to determine which slide to go to. What you can do is add inline custom attributes to your pager-item. This attribute would be, for example: data-slide="x", x being the slide index (according to BxSlider documentation, 0 being slide 1, etc).
<ul class="one-pager-to-rule-them-all">
<li><a class="pager-item" data-slide="0">1</a></li>
<li><a class="pager-item" data-slide="1">2</a></li>
<li><a class="pager-item" data-slide="2">3</a></li>
<li><a class="pager-item" data-slide="3">4</a></li>
</ul>
Back to your JS file, I would create an OnClick event for my pager-items. BxSlider is a great plugin and provides all sort of nifty and useful callbacks, methods and events you can use to your advantage. That way, by clicking a pager element, you will be able to retrieve the slide index value with jquery and call BxSlider's own 'goToSlide(x)' method. You will need to call that method on each of the previously declared variables in which we stored our slider initialization. Take the time to read bxSlider documentation.
var toSlide = $(this).attr('data-slide');
mySlider1.goToSlide(toSlide);
mySlider2.goToSlide(toSlide);
mySlider3.goToSlide(toSlide);
By doing this, all sliders will be controlled by the same pager.
Check out my jsfiddle
Is this what you wanted?

Related

How to toggle visibility of thumbnail strip in Fancybox 4?

From the guide
You can check current state of Thumbnail plugin and toggle visibility
of thumbnail strip using API:
Fancybox.getInstance().plugins.Thumbs.state;
Fancybox.getInstance().plugins.Thumbs.toggle();
and since it shows thumbnail automatic when opened, I use it this way to disable visibility of thumbnail strip
...
<script src="https://cdn.jsdelivr.net/npm/#fancyapps/ui#4.0/dist/fancybox.umd.js"></script>
<script>
$(document).ready(function(){
Fancybox.getInstance().plugins.Thumbs.toggle();
});
</script>
</body>
</html>
But it does not work, so how to use it?
This code snippet:
Fancybox.getInstance()
allows you to get reference to the top most active instance.
This means that your code will not work just because you have not started Fancybox.
To toggle visibility at the start, simply use autoStart option like this:
Fancybox.bind("[data-fancybox]", {
Thumbs: {
autoStart: false,
},
});

Advance slick slider when image in gallery is clicked (multiple slick sliders on one page)

I came across this modification for slick slider for advancing when clicking on the current image (see below). When I implement it on my page with multiple galleries it advances all galleries when I click on one, not only the one selected. Is there a possibility to use e.g. "this" selector in here?
http://codepen.io/ethanclevenger91/pen/MYNGrN
window.onload=function(){
$slideshow = $('.slider').slick({
dots:false,
autoplay:false,
arrows:false,
adaptiveHeight: true,
slidesToShow:1,
slidesToScroll:1
});
$(".slide").click(function() {
$slideshow.slick('slickGoTo', parseInt($slideshow.slick('slickCurrentSlide'))+1);
});
};
Please see the following codepen: http://codepen.io/anon/pen/ZOGmWo?editors=1010
The main idea is to define each slider separately.
First, define an object to hold all the sliders:
var sliders = {};
Then, looping through all the sliders, extracting the ID and saving a reference to the newly defined slider in our map, indexed by the ID:
$('.slider').each(function (index, slider) {
var id = slider.getAttribute('id');
console.log(id);
sliders[id] = $(slider).slick({ ... })
});
Now, on the click handler, we determine to which slider do the clicked slide belong to, using $(this).closest('.slider') and using progressing it.
$('.slide').click(function() {
var id = $(this).closest('.slider').get(0).getAttribute('id');
var $slideshow = sliders[id];
$slideshow.slick('slickGoTo', parseInt($slideshow.slick('slickCurrentSlide'))+1);
});

Re-apply JQuery in Meteor template

I have a template with a slick carousel, depending on some JQuery. I add this code to the template as follows:
Template.show_house.rendered = function () {
$('#carousel').slick({
dots: true,
arrows: true
});
};
This template depends on a helper:
Template.show_house.helpers({
house : function() {
return Houses.findOne({_id : Session.get("selectedHouse")});
},
...
When the session changes (user clicking on another item), the data in the template changes, but the JQuery isn't applied again, and the images are just shown as a list rather than a carousel.
I've been playing around with UI.render, but to no avail. What can I do?
I had the same problem, the things for is that i wasnt applying the event Template.foo.rendered to the specific template. Try to apply the jquery event on "rendered" to the proper template and see if it works!

jQuery - bxSlider plugin reloadSlider issues

I'm using jQuery with the bxSlider plugin, here is the link to it just incase: http://bxslider.com/
I'm trying to reload the slider and my custom pager after I've removed certain slides from it.
Here is what I have tried:
$(function() {
var slider = $('#slider').bxSlider({
pagerCustom: '#bx-pager'
});
$('.list').on('click', '.delete', function() {
image = $(this).closest('li').find('[type="hidden"]');
// image.attr('id') contains a string: image-0, image-1, image-2, etc.
$('#slider, #bx-pager').find('.' + image.attr('id')).remove();
slider.reloadSlider({
pagerCustom: '#bx-pager'
}); // I have also tried: slider.reloadSlider();
});
});
It works partially. What happens is the slider gets reloaded just fine but it removes the pager completely when it runs the reload.
Thank you very much for any help.
As long as I see, this is a bug in bxSlider, in fact, when you call the reloadSlider method, internally are called the methods destroySlider and init.
In the destroySlider method the pagerEl element is destroyed, this is right if you are not using a custom one, because it is recreated programmatically in the init method, but if you are using a custom one it can't be recreated programmatically.
I ended up modifying the destroySlider method to check if a custom pager is used, in this case it must not be deleted.
Here is the before (line 1294):
if(slider.pagerEl) slider.pagerEl.remove();
And after:
if (slider.settings.pagerCustom === '') {
if(slider.pagerEl) slider.pagerEl.remove();
}
I'll post the bug on GitHub as soon as I have the time.

jQuery mobile 1.1.0 slider: JS-object properties access?

EDIT: This could be seen as a pure javascript objects question. The code can be found here:
jquery.mobile-1.1.0.js
I need to access properties of a jQuery mobile JS-object but is not sure how that is possible. In the jquery.mobile-1.1.0.js and mobile.slider is the following (see extend on line 5967):
$.widget( "mobile.slider", $.mobile.widget, {
...
_create: function() {
...
$.extend( this, {
slider: slider,
handle: handle,
valuebg: valuebg,
dragging: false,
beforeStart: null,
userModified: false,
mouseMoved: false
});
Primarily the property I would like to read is the "dragging".
I know i can execute the methods using:
$("#slider").slider("refresh")
Is there a similair way to access the properties?
Thanks
How to react to user dragging the slider, without having to bind mouse-/tap-events, but instead using the JQM functionallity already in place.
To access the "dragging" variable of the JQM slider object I made an extension to the object as follows:
$(document).bind("mobileinit", function(){
$.mobile.slider.prototype.getDragging = function(){
return this.dragging;
};
});
With that in place, I can choose to react to changes only done by the user:
$("#slider").live('change',function(){
if($("#slider").slider("getDragging"))){
console.log('User is dragging slider to new value');
}
else {
console.log('Program changed value. (or user typed in visible textbox)') ;
}
});
With the slider textbox hidden, this give me the benefit of:
Using the "change"-event to react to user dragging without being triggered when my program change the slider value.
When my program is going to change the slider value, it can first check that the user is NOT currently dragging the slider.

Categories

Resources