How to make a slider autoscroll using jquery - javascript

http://405pixels.gowerpowered.com
I have the slider, and I have been trying to figure out how to make the homepage autoslide?
I tried using firebug to locate the files... Located some .js files that contain some information about the homepage slider... but all the changes and everything I make seem to not be working...
This is a free template I found called BigFoot. I am really interested into learning about how this javascript would work that is why I downloaded in the first place... to learn from the template... If you could point me in the right direction that would be awesome.
Thanks,
Alex

You'll need to replace the actual photo swapping code with whatever you use but the rest will swap out each picture every 5 seconds.
$(document).ready(function() {
var next = $('#right-button');
next.click(function() {
$('#current-picture').fadeOut('fast');
$('#next-picture').fadeIn('fast');
...whatever code you use for this.
});
var scroll = setInterval(function() {
next.trigger("click");
if(picture is last) {
clearInterval(scroll);
}
}, 5000);
});

you are using flex slider so you can use the code below.
jQuery(window).load(function() {
jQuery('.flexslider').flexslider( {
pauseOnHover: true,
slideshow: false,
controlsContainer: ".flex-container"
} );
} );
actually this it the param you need to pass to make slider autostart
slideshow: false,
Let me know if you run into any other issues.

Related

jquery owl-carousel owl-dots class issue

I get some problem when I use owl-carousel in my Rails project.
when I go back to the cached page of my browsers which is using carousel class, I get too many carousel owl-dot classes in my page,this is my
JS code
function initScrollboxHobby() {
var owl = $(".owl-carousel");
owl.owlCarousel({
// loop: true,
items: 1,
nav: true
});
}
and issue HTML code
How to fix it ?
I guess you are using turboinks and when you go back the page is cached by it and when it loads it reruns the owl carousel init function.
The problem, básically, is that turbolinks doesn't play well with non-idempotent functions https://github.com/turbolinks/turbolinks#making-transformations-idempotent
I've managed to make a workaround for this problem with other js plugins, so it should work for you.
Básically, the idea is:
First, when the user enters the page for the first time, copy the content of the element with class .owl-carousel on itself as a data attribute
carousel = $('.owl-carousel');
carousel.data('originalHtml', carousel.html();
carousel.owlCarousel(....)
Then, when the users goes back, before initializing the carousel, check if it was initialized and cached, in that case, first replace the content with the original and remove classes
carousel = $('.owl-carousel');
if (carousel.hasClass('owl-loaded')) {
carousel.html(carousel.data('originalHTML')).removeClass('owl-theme owl-loaded owl-drag');
}
carousel.owlCarousel(....)
You can mix both steps into one:
$(function() {
const carousel = $('.owl-carousel');
if (carousel.hasClass('owl-loaded')) { //if it has the class then it means it's the cached view
carousel.html(carousel.data('originalHTML')).removeClass('owl-theme owl-loaded owl-drag');
} else { // else it's a fresh load of the page
carousel.data('originalHtml', carousel.html());
}
carousel.owlCarousel(....)
})
It's a little bit hacky, but the only way I found to use plugins that are not prepared to work with turbolinks without going through modifying those plugins.
Another option would be to just disable Turbolinks if you thing you just don't need it.
For arieljuod's help of problem reason and my own trying.
I coded like this now.
var owl = $(".owl-carousel");
var owl_navs = $('.owl-carousel .owl-nav');
var owl_dots = $('.owl-carousel .owl-dots');
var owl_cloned = $('.owl-carousel .owl-stage-outer .owl-stage .cloned');
if(owl.hasClass('owl-loaded'))
{
owl_navs.remove();
owl_dots.remove();
owl_cloned.remove();
}
owl.owlCarousel({
loop: true,
items: 1,
nav: true
});
It's tedious but worked well.
Now,I understanded reason.
When I go back to cached page,because I wrote javascript code in my ERB file,in that way, old HTML code may changed.
And then Turbolinks function will run the JS code in that CHANGED new HTML code,Turbolinks must do that,because when I visit cached page again,it will lose all the event binds.
So the whole carousel items will be messy.

How to change Javascript carousel (slick.js) settings on one page only?

I'm using Slick carousel by Ken Wheeler. I set the global settings (for the whole site) to autoplay slides like this:
autoplay: true,
autoplaySpeed: 5000,
but on one page on the site I don't want it to autoplay.
Is there any way I can override this global setting using an inline script?
Something like this:
<script>
function (iSuckAtJavaScript) {
autoplay: false,
};
</script>
?? Thank you!
There are a number of ways you could approach it depending on how your site is set up and how the plugin gets initialized. But to fill in the iSuckAtJavaScript part of your question, you could match on a specific path/page like this.
if (window.location.pathname === '/no-autoplay-page.html') {
// Initialize the carousel
}

Slick Carousel Blank

I set up an overlay slick carousel, so when you click on the image a larger carousel appears with the selected image as the initialSlide. However, Slick carousel is adding several blank slides after the initialSlide. The blanks only appear when you click next starting with the third slide. When you click on the previous button the blank slides do not appear. What am I doing wrong?
$("#sync1 .item").on("click", function() {
var index = $(this).attr("data-slick-index");
$(".overlay-carousel-container").css("display", "block");
$("body").css("overflow", "hidden");
$("#overlayCarousel").slick({
slidesToShow: 1,
slidesToScroll: 1,
fade: true,
initialSlide: index,
focusOnSelect: true
});
})
$(".close").on("click", function() {
$(".overlay-carousel-container").css("display","none");
$("body").css("overflow", "inherit");
$("#overlayCarousel").slick("unslick");
$("#executiveOverlay").slick("unslick");
});
The Jquery attr() function returns a string value. When you pass that into the slick constructor function it translates it to a different number.
Adding a simple Number() function to change the index to numeric should solve your problem. Just place the following middle line between the lines I placed it:
var index = $(this).attr("data-slick-index");
index = Number(index);
$(".overlay-carousel-container").css("display", "block");
This answer is for the people who are struggling slick carousal as I also faced a lot of problem with it, even though it seems very easy as mentioned but I found out that it has lots limitation.
Very old
To have exact same look like mentioned it needs CSS(SCSS) which is difficult to do in development which as a new user I realised it quite late. Or you don't get dots and arrows with the same exact look easily.
Several other issues like the one mentioned here and other I found over stack flow.
The best one I resorted to for similar process is the one mentioned here
it's latest
and comes with a simple tutorial as well
Recommended for new beginner developers.

jQuery image slider stops working after page sliding

I'm having a trouble with a jQuery image slider that works only the first time i open its page !
I have one main page, that includes via Ajax three page portions (Home, Presentation and Contact), the home portion contains the image slider !
To move through the pages, i use another jQuery page slider which includes the right portion and plays a sliding animation to show it !
So when i go for example from the home page to the presentation page, and then comeback to home ... the image slider isn't working anymore, and sometimes doesn't even appear !
What does it mean ?
How can i make sure the script is reloaded after the page slider finishes the transition, cause i think the problem comes from it ?
$(document).ready(function() {
$('#slides').slidesjs({
width: 700,
height: 300,
play: {
active: false,
auto: true,
interval: 3000,
swap: true
}
});
$(".menuButton").click(function() {
var page = $(this).attr("id");
var cont = $("#container");
var cont1 = $("#container1");
cont1.load("parts/"+page+".html", function() {
cont.hide("slide", {direction:"right"}, function() {
cont1.show("slide", {direction:"left"});
});
});
});
});
Thank you.
If the script is included in the portions loaded by ajax, it won't run (ajax loaded scripts are not ran by default). So basically, after the success event, just call the functions from the script.

Javascript making text slide in from html

I am trying to make a text-slide-in effect on a web page. I am using the javascript slidesjs library because it seemed like the best fit. However, I cannot make it work when triggered by a web click.
I have a live example running at: http://107.22.173.10
Note that when you click the "GOTO" links nothing happens.
The basic code is as follows and it seems the page is supposed to automatically put '#' anchors in to trigger the slides. I can't make this work, or figure out how to debug this.
$(function(){
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#','');
}
// Initialize Slides
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
generatePagination: true,
//play: 5000,
//pause: 2500,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
});
Does anyone see what's going wrong here?
What is the best way to debug this problem?
Is there a better way or library I should be using?
Any advice is appreciated. Thanks!!
You're not following the example from slidesjs.com. See "Basic HTML structure". You're putting only one element in the #slides_container div, and assign all sorts of weird absolute positioning to it, which of course won't work with the animation code.
Copy paste the example first, then start adding your own tweaks concerning style.

Categories

Resources