I am building my portfolio website. I have included a slider on my web page, I would like to know how i can control the slider and caption speed.
I had tried including this javaScript code to see if it works but no way.
JavaScript
<script>
$('.sl-slider').carousel({
interval: 10000
});
</script>
HTML
<div class="slider-item js-fullheight">
<div class="overlay"></div>
<div class="container-fluid p-0">
<div class="row d-md-flex no-gutters slider-text js-fullheight align-items-center justify-content-end" data-scrollax-parent="true">
<div class="one-third order-md-last img js-fullheight" style="background-image:url(images/md_2.jpg);">
<div class="overlay"></div>
</div>
<div class="one-forth d-flex js-fullheight align-items-center ftco-animate" data-scrollax=" properties: { translateY: '20%' }">
<div class="text">
<h1 class="mb-4 mt-3"><span></span></h1>
<p></p>
<p>Get in touch</p>
</div>
I expected the output to be a slide every 10 seconds, but it is still a slide every 3 seconds
If you are using carousel in bootstrap. Try this:
<div id="yourCarousel" class="carousel slide" data-ride="carousel" data-interval="3000"></div>
Related
I wanted to know if there was an easy way to change the div position when i refresh my browser I don't want to lose the place that I have changed to i have 3 Div (Div1 Logo - Div2 Text - Div3 Langue) I want to change Div2 and Div3 when witdh page <=765 and refresh and don't lose this position (Div1 -Div2 -Div3)
$(document).load($(window).bind("resize", listenWidth));
function listenWidth( e ) {
if($(window).width() <= 765)
{
$(".welcomeheader1").remove().insertAfter($(".welcomeheader2"));
} else {
$(".welcomeheader1").remove().insertBefore($(".welcomeheader2"));
}
}
HTML Code
<div id="header" class="header clearfix">
<div class="row clearfix">
<div class="col-lg-3 col-md-3 col-sm-6 col-4 xs-last txtRight">
<div id="headerLogo" ></div>
</div>
<div id="welcome" class="txtCenter col-lg-6 col-md-7 col-sm-12 col-12 clearfix welcomeheader1">
<!-- <img src="./resources/_images/wifi.png?1595436503" class="wifi-img" alt="WIFI" /> -->
<!--
<div class="wifi-symbol">
<div class="wifi-circle first"></div>
<div class="wifi-circle second"></div>
<div class="wifi-circle third"></div>
<div class="wifi-circle fourth"></div>
</div>
-->
<img class="wifi_welcome" src="./resources/_images/wifi_welcome.png?1590753851" alt="">
<h1 id="welcomeHeadline">WELCOME</h1>
<h2 id="connectezvous">Connectez-vous au Wifi gratuit</h2>
</div>
<div class="col-lg-3 col-md-2 col-sm-6 col-8 welcomeheader2 " align="Right">
<div id="lang_block">
<i id="showLanguages"> <span id="language_text_id">Langue</span> <img class="left_arrow" src="./resources/_images/left-arrow.png?1590753851" alt=""></i>
<div id="langContainer">
<a id="lang_link[en]" href="#" style="display:none"><img src="./resources/_images/flags/en.png?1595436503" title="English"></a>
<a id="lang_link[fr]" href="#" style="display:none"><img src="./resources/_images/flags/fr.png?1595436503" title="Français"></a>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<!-- The header template -->
<!-- Will be added on top of the page -->
So call the function on load
$(document).load( function () {
listenWidth();
$(window).bind("resize", listenWidth)
});
I'm working on a webpage that uses a carousel to show content on smaller screen sizes. I cooked up some javascript to create a "swipe" function on mobile devices and it works perfectly on android devices. However, on SOME iPhones (ones running the newer versions of IOS) the event seems to be triggered twice.
I've been researching this for various days, and although I've seen some similar scenarios, none are quite the same. Usually, the similar scenarios that I've found have two events being binded and thats what triggers the function twice. For example, $button.bind("touchstart click");
That, however, is not my problem.
My problem is that the $("#mobileCarousel").on("touchstart") seems to be firing twice on iPhones with the newer IOSs. I have no other events being binded, just the "touch"
Here is a video example of what is happening: https://youtu.be/8XGMKTpUUrI
I've included the js, css, and html.
I've been losing sleep over this, so any tips/solutions on how to fix this would be greatly appreciated. :D
$("#mobileCarousel").carousel({
interval: 10000
})
$("#mobileCarousel").on("touchstart", function(event){
var xClick = event.originalEvent.touches[0].pageX;
$(this).one("touchmove", function(event){
var xMove = event.originalEvent.touches[0].pageX;
if( Math.floor(xClick - xMove) > 3 ){
$(this).carousel('next');
console.log("the touch event is firing twice.");
}
else if( Math.floor(xClick - xMove) < -3 ){
$(this).carousel('prev');
console.log("the touch event is firing twice.");
}
});
$(".carousel").on("touchend", function(){
$(this).off("touchmove");
});
});
$(".carousel carousel-item").each(function(){
var minPerSlide = 3;
var nextElement = $(this).next();
if(!nextElement.length){
nextElement = $(this).siblings(":first");
}
nextElement.children(':first-child').clone().appendTo($(this));
for (var i = 0; i < minPerSlide; i++) {
nextElement = nextElement.next();
if(!nextElement.length){
nextElement = $(this).siblings(":first");
}
nextElement.children(":first-child").clone().appendTo($(this));
}
});
#media only screen and (max-width: 993px) {
.carousel-inner .carousel-item > div {
display: none;
}
.carousel-inner .carousel-item > div:first-child {
display: block;
}
}
<div class="container-fluid carousel-container d-lg-none d-xl-none">
<div id="mobileCarousel" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="card index-card border-success">
<div class="d-flex justify-content-center">
<img src="code icon.png" alt="">
</div>
<div class="d-flex justify-content-center">
<p class="pTagsForCardTitles"><HTML> and CSS3</p>
</div>
<div class="d-flex justify-content-center">
<p class="pTagsForCards d-flex justify-content-center">We design and program your website from scratch and to
your liking. No restrictive templates! Have the website you have always dreamt of for your business.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card index-card border-success">
<div class="d-flex justify-content-center">
<img src="shield icon.png" alt="">
</div>
<div class="d-flex justify-content-center">
<p class="pTagsForCardTitles">Online Security</p>
</div>
<p class="pTagsForCards d-flex justify-content-center">Tropiweb supplies SSL security certificates to every
page it produces. Keep your transactions and clients' sensitive informations out of the wrong hands.</p>
</div>
</div>
<div class="carousel-item">
<div class="card index-card border-success">
<div class="d-flex justify-content-center">
<img src="search icon.png" alt="">
</div>
<div class="d-flex justify-content-center">
<p class="pTagsForCardTitles">Search Engine Optimization</p>
</div>
<p class="pTagsForCards d-flex justify-content-center">We optimize your web-page's <meta>, <alt>, and
<title> tags in order to maximize the probability of potential clients finding you through any search engine</p>
</div>
</div>
<div class="carousel-item">
<div class="card index-card border-success">
<div class="d-flex justify-content-center">
<img src="responsive icon.png" alt="">
</div>
<div class="d-flex justify-content-center">
<p class="pTagsForCardTitles">Sleek and Responsive</p>
</div>
<p class="pTagsForCards d-flex justify-content-center">Your website is designed with cross-platform compatability as a priority.
No matter the web-browser or device (tablet, laptop, or phone) your page will always function properly.</p>
</div>
</div>
<div class="carousel-item">
<div class="card index-card border-success">
<div class="d-flex justify-content-center">
<img src="money icon.png" alt="">
</div>
<div class="d-flex justify-content-center">
<p class="pTagsForCardTitles">E-Commerce Solutions</p>
</div>
<p class="pTagsForCards d-flex justify-content-center">Run your online shop right from your very own website. Validate transactions,
keep stock of your merchandise, charge applicable sales taxes, and ship your product with no hassle.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#mobileCarousel" role="button" data-slide="prev">
<span>
<img class="carousel-arrow-right" src="flecha-de.png" alt="">
</span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#mobileCarousel" role="button" data-slide="next">
<span>
<img class="carousel-arrow-left" src="flecha-iz.png" alt="">
</span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
So, after many sleepless nights and debugging I fixed the issue. Apparently the issue was that I was using an old deprecated version of jQuery. Once I started using the latest version of jQuery, the issue went away.
So this is what I’m hoping to accomplish.
I currently have a bootstrap grid displaying 1 row and 4 columns.
On desktop devices the 4 columns appears next to each other
On tablets they appear in a 2 x 2 grid and in Mobile devices they appear 4 rows with 1 column.
Is it possible to make it so that when in tablet or mobile to have a carousel that I can slide between the 4 columns? So that when in Tablet there are 2 slides with two of the columns in each slide and when in mobile 4 slides with 1 column in each slide?
Here is my current grid code.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="how container">
<div class="title">SUBSCRIBE IN JUST 4 EASY STEPS</div>
<div class="row no-gutters">
<div class="col text-center">
<img src="https://dummyimage.com/400x400/000/fff" style="height:200px;">
<span>SIGN UP</span>
</div>
<div class="col text-center">
<img src="https://dummyimage.com/400x400/000/fff" style="height:200px;">
<span>SELECT AGE GROUP</span>
</div>
<div class="w-100 d-block d-lg-none"></div>
<div class="col text-center">
<img src="https://dummyimage.com/400x400/000/fff" style="height:200px;">
<span>CHOOSE A SUBSCRIPTION PLAN</span>
</div>
<div class="col text-center">
<img src="https://dummyimage.com/400x400/000/fff" style="height:200px;">
<span>HAVE FUN</span>
</div>
</div>
<div class="row text-center pt-3">
<div class="col">
<button type="button" class="btn btn-dark btn-lg">GET STARTED</button>
</div>
</div>
</div>
If Bootstrap is the only library you're allowed to use, I would imagine you would have to have duplicate contents and show/hide one of them on different breakpoints for carousels or just regular 4-column content.
If that's not the case, I would highly recommend you to use OwlCarousel! That has everything you're looking for.
HTML
<div class="how container">
<h4 class="title">
SUBSCRIBE IN JUST 4 EASY STEPS
</h4>
<div class="owl-carousel owl-theme">
<div class="item">
<figure class="figure">
<img src="https://loremflickr.com/600/200?random=1"
class="figure-img img-fluid w-100" />
<figcaption class="figure-caption">
SIGN UP
</figcaption>
</figure>
</div>
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>
</div>
As you can see, basically you just need a wrapper with a class .owl-theme that wraps a collection of .items. Inside each item, you can have any content you want. Here I just demonstrated to have a <figure /> inside of each item.
JavaScript
Make sure you've loaded jQuery first, then the javascript file of OwlCarousel, and then 2 style files: 1 core css and 1 theme. Installation details are documented here.
$(function() {
$('.owl-carousel').owlCarousel({
loop: false,
margin: 0,
nav: false,
responsive:{
0:{
items:1
},
768:{
items:2
},
992:{
items:4
}
}
});
});
See, in the responsive option, this is where you define how many items you want per break point. More info from their documentation site here!
Result
demo: https://jsfiddle.net/davidliang2008/mvn3k08u/22/
I building a website, and I am not good in js or jQuery. I have no idea what to do. I was in search for couple days, to find any library that support this feature. However, there are different libraries I found, but most of them are separate from what I need, zoom and thumbnails. It has to be similar to Amazon or eBay product listing slider.
Can any one give me a clue where should I start?
PS. I tried swiper.js, but it has zoom only on double click.
Updated 5/16/2017
Example
Hi first of all visit to the link http://www.landmarkmlp.com/js-plugin/owl.carousel/ and download slider.
open your header of the website theme and put the js and CSS which one mentions into the snippet below, and replace the images, js and css files path which where it is.
After that put the HTML sections where you would like to show your slider, and replace the div with your dynamic products loop code.
$(document).ready(function($) {
$("#owl-example").owlCarousel();
});
$("body").data("page", "frontpage");
<link href="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/css/custom.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<link href="http://www.landmarkmlp.com/js-plugin/owl.carousel/owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="http://www.landmarkmlp.com/js-plugin/owl.carousel/owl-carousel/owl.theme.css" rel="stylesheet">
<div id="demo">
<div class="container">
<div class="row">
<div class="span12">
<div id="owl-example" class="owl-carousel">
<div class="item darkCyan">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/touch.png" alt="Touch">
<h3>Touch</h3>
<h4>Can touch this</h4>
</div>
<div class="item forestGreen">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/grab.png" alt="Grab">
<h3>Grab</h3>
<h4>Can grab this</h4>
</div>
<div class="item orange">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/responsive.png" alt="Responsive">
<h3>Responsive</h3>
<h4>Fully responsive!</h4>
</div>
<div class="item yellow">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/css3.png" alt="CSS3">
<h3>CSS3</h3>
<h4>3D Acceleration.</h4>
</div>
<div class="item dodgerBlue">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/multi.png" alt="Multi">
<h3>Multiply</h3>
<h4>Owls on page.</h4>
</div>
<div class="item skyBlue">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/modern.png" alt="Modern Browsers">
<h3>Modern</h3>
<h4>Browsers Compatibility</h4>
</div>
<div class="item zombieGreen">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/zombie.png" alt="Zombie Browsers - old ones">
<h3>Zombie</h3>
<h4>Browsers Compatibility</h4>
</div>
<div class="item violet">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/controls.png" alt="Take Control">
<h3>Take Control</h3>
<h4>The way you like</h4>
</div>
<div class="item yellowLight">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/feather.png" alt="Light">
<h3>Light</h3>
<h4>As a feather</h4>
</div>
<div class="item steelGray">
<img src="http://www.landmarkmlp.com/js-plugin/owl.carousel/assets/img/demo-slides/tons.png" alt="Tons of Opotions">
<h3>Tons</h3>
<h4>of options</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://www.landmarkmlp.com/js-plugin/owl.carousel/owl-carousel/owl.carousel.min.js"></script>
Hope so it will work for you. You just need to update files path according where it is situated in your website files directories.
I have tried to use the foundation framework with the orbit sliders and when I test it on the browser, the slider performs the transitions, however the animations are not being performed and simply fades from 1 section to another.
Only when I try to resize the window, it works as expected.
After further inspection, apparently when the slider attempts to change using 'horizontal-push' the variable this.outerWIdth for the orbit-slide div is 1 instead of the actual width of the div.
Here is my markup for the features slider which I am using orbit for.
<div id="features-wrap" class="wrapper">
<!-- Insert Features Here -->
<div id="features-gutter" class="row">
<section id="features" class="row">
<div id="welcome">
<div class="eight columns">
<h4>Welcome</h4>
<p>Hello.</p>
</div>
<div class="four columns">
<img src="img/content/promo1.jpg" alt="Promo Image 1" width="320" height="220">
</div>
</div>
<div id="decorated">
<div class="eight columns">
<h4>Decorated Apparel</h4>
<p>Some Text</p>
</div>
<div class="four columns">
<img src="img/content/promo2.jpg" alt="Promo Image 1" width="320" height="220">
</div>
</div>
<div id="promotional">
<div class="eight columns">
<h4>Protional Products</h4>
<p>Some Text</p>
</div>
<div class="four columns">
<img src="img/content/promo3.jpg" alt="Promo Image 1" width="320" height="220">
</div>
</div>
</section>
</div>
<!-- End Insert Features Here -->
</div>
end of code
Here is also the Javascript I am calling.
var featuresSlider = $('#features');
featuresSlider.orbit({fluid: '2x1', animationSpeed: 650, animation: 'horizontal-push' });
Is there anything I am doing with the code or is it really a bug with the current script for orbit?
Thanks.
found the answer. I in order for the slider to get the right outerWidth I had to go to the div that initializes the sliders and overide the width that is set by the plugin in the css file. For example:
If features controls my orbit slider, then i need to do this:
#features {
width: <set the width here> !important;
<any other styles here>
}
Thanks