I have a slickJS carousel that I am using with ~ 12 menu items. On a message from a websocket connection, the page is re-loaded with up-to-date information via AJAX, the HTML including the slickJS carousel. The carousel re-initializes fine cosmetically, however the controls (arrows, click-n-grab) do not work. I can pick a new 'menu item' from the current view but nothing else is functional. I have also tried manually re-initializing slick using
$('.my-menu-list').slick('unslick').slick('reinit');
but that yields the same result. For reference, my init command for slick is
$(document).ready(function(){
$('.my-menu-list').slick({
arrows: true,
infinite: true,
lazyLoad: 'progressive',
speed: 600,
slidesToShow: 4,
slidesToScroll: 4,
initialSlide: $('.my-menu-list.active').data('slick-index')
});
});
and it is loaded from an external file.
Related
I have been working on a bigcommerce stencil theme for a couple months and today I modified some js for the thumbnail slider. I can see that after running the stencil bundle and uploading my theme that only my js changes are not making it. All my scss and template changes are there but the js never makes it.
This is what I am modifying:
$('.product-images-pagination').slick({
infinite: false,
dots: false,
arrows: true,
slidesToShow: 4,
slidesToScroll: 3,
variableWidth: false,
asNavFor: '.product-slides-wrap',
focusOnSelect: true,
});
And on the server this is what I see:
(".product-images-pagination").slick({
infinite:!0,
dots:!1,
arrows:!1,
slidesToShow:5,
slidesToScroll:1,
variableWidth:!0,
asNavFor:".product-slides-wrap",
focusOnSelect:!0
})}}])
Clearly the changes are not making it and I dont know why. Please help me if you can.
I'm only familiar with HTML and CSS, which I use on a daily basis. !Important CSS overrides are something I have to do TONS of in order to customize websites for clients that use a 3rd party CRM system, but now I've been asked to see if I can override what a Javascript image slider does; namely if I can force it to let the images rotate out instead of showing a single image that only randomly changes out to other ones when the page refreshes. I'm not familiar enough with Javascript to know how to do this; I've used this same sort of image slider many many times over, so I know what settings need to be changed, but I don't know how to force an override like I do with CSS, or if it's even possible to tack on another on the same page that will do it.
Here's the javascript code snippet that the webpage has on it already.
<script type="text/javascript">
$(document).ready(function () {
var randSlick = Math.floor( Math.random() * $('#carousel > div').length );
$('#carousel').slick({
infinite: true,
autoplay: false,
autoplaySpeed: 10000,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true
}).slickGoTo(randSlick);
});
</script>
I need to change the "autoplay" to true, so it will play automatically instead of do nothing, and I'd like to change the "autoplaySpeed" to something more reasonable, like 3000.
I don't have access to this part of the code (Hence why I'm always having to do CSS !Important overrides; I can't just edit the existing code directly, I have to add my own in a sneaky hackery sort or way) so I'm hoping that there's an easy way to do this. My apologies if this is long winded or confusing in any way; I've taught myself HTML and CSS easily enough but Javascript is proving to be another animal entirely and I'm just flailing around at this point.
To get the obvious out of the way:
You will not be able to modify the JavaScript code with HTML/CSS, you can only do so via JavaScript.
What you see in the script is JQuery, a JavaScript extension library: see: JQuery API.
I recommend that you make your own script to reset the values of the $("#carousel") via the unslick function, which is clearly documented here: see: SlickJS.
$("#carousel").slick('unslick');
Immediately after which you can bind $("#carousel") with your own parameters like so:
<script type="text/javascript">
$(document).ready(function () {
var randSlick = Math.floor( Math.random() * $('#carousel > div').length );
$('#carousel').slick({
infinite: true,
autoplay: true,
autoplaySpeed: 3000,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true
}).slickGoTo(randSlick);
});
</script>
Make 100% sure that your JavaScript file gets called after the SlickJS import.
Any questions? Ask in the comments below :-)
In your page, you can deconstruct the existing slick object and recreate it with your own settings.
<script type="text/javascript">
$(document).ready(function () {
$('#carousel').slick('unslick'); // Destroy existing slick object
// Start a new one with the options you want
$('#carousel').slick({
autoplay: true,
autoplaySpeed: 3000
});
});
</script>
I have this script for a Slick Carousel within some Ajax Tabs and I keep getting the Uncaught TypeError: undefined is not a function error, not quote sure what it's referring to?
$(document).ready(function(){
$('.single-item').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 7000
});
});
Check which version of jquery is included and that there is only one instance. I've ran into this issue too and was able to fix it by upgrading my jquery.
I am trying to load flexslider in easytabs. I have two flexsliders on the page. One in under photos which loads with the page and the other is under Features. The flexslider on the Features tab will not load because it is initially hidden.
I am looking for some js code to execute the second flexslider when the tab is clicked.
Any help is appreciated
Note: I have already made adjustments and confirmed that both flexsliders work on the page without tabs.
I went with pikachoose instead of flexslider and it worked.
I found this worked for what I wanted to do.
$(document).ready(function(){
$('.flexslider').flexslider({
animation: 'slide',
animationLoop: false,
prevText: '',
nextText: '',
controlNav: false,
keyboard: false,
slideshow: false,
start: function(){
// This is your easytabs install
$('.tab-container').easytabs({
updateHash: false,
animate: false
});
}
});
});
Basically it only initialises easytabs when flexslider is done.
(I am using cycler jquery malsup.
I have links in the content area of my jquery cycler area (where a photo often is) (links called 'read more') that I want to go to a url within my website.
I can't get the links to work.
My development page is: http://new.bishopchatard.org/New2011
The css is: http://new.bishopchatard.org/New2011/cycler.css
The pertinenet js is:
$('#scroller')
.cycle({
fx: 'scrollLeft',
speed: '800',
timeout: 4500,
pager: '#scrollernav',
pagerEvent: 'mouseover',
pauseOnPagerHover: true,
next: '#scroller'
});
Thank you for your help.