So I'm trying to use the SwiperJS library, but it doesn't work. It's a pretty big website with A LOT of content on the page I'm trying to use it for. The strange thing is, on a small testing website of myself it does work. But when I try to use it on the bigger website console throws an error.
My code:
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-2.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-3.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-4.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-5.jpg" />
</div>
<div class="swiper-slide">
<img src="https://swiperjs.com/demos/images/nature-6.jpg" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
And the JS:
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js" id="script-swiper"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
pagination: {
el: ".swiper-pagination",
},
observer: true,
observeParents: true
});
</script>
Console error: Swiper is not defined at www.url.com/script.js
I already tried window.onload and to set a timeout of a few seconds before running new Swiper. Does anybody maybe know how to fix this?
You need to add CSS tag also in your header:
<head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css"/></head>
p.s. I know it's a year later but hopefully this helps someone who comes across this question.
Related
I'm trying to add owl-carousel slider to my angular 7 project
the problem is that owl.carousel.js not load
i already added it to angular.json -> script[]
but does not work
here is my angular.json-> script
"scripts": [
"src/assets/ltr/js/jquery-2.2.4.min.js",
"src/assets/ltr/js/bootstrap.min.js",
"src/assets/ltr/js/themejs/libs.js",
"src/assets/social-js/card.js",
"src/assets/ltr/js/unveil/jquery.unveil.js",
"src/assets/ltr/js/countdown/jquery.countdown.min.js",
"src/assets/ltr/js/dcjqaccordion/jquery.dcjqaccordion.2.8.min.js",
"src/assets/ltr/js/jquery-ui/jquery-ui.min.js",
"src/assets/ltr/js/bootstrap-notify.min.js",
"src/assets/ltr/js/themejs/application.js",
"src/assets/ltr/js/themejs/homepage.js",
"src/assets/ltr/js/themejs/so_megamenu.js",
"src/assets/ltr/js/themejs/toppanel.js",
"src/assets/ltr/js/owl-carousel/owl.carousel.js",
"src/assets/ltr/js/crypto-js/CryptoJS.js"
]
and component.html
<div id="so-slideshow">
<div class="module slideshow--home8 no-margin" >
<!-- <app-carousel [source]="sliderData" [imageDefault]="'1920x550.jpg'"></app-carousel> -->
<div class="item">
<img src="https://images.unsplash.com/photo-1490077476659-095159692ab5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="slider1" class="img-responsive">
</div>
<div class="item">
<img src="https://images.unsplash.com/photo-1490077476659-095159692ab5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="slider1" class="img-responsive">
</div>
<div class="item">
<img src="https://images.unsplash.com/photo-1490077476659-095159692ab5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt="slider1" class="img-responsive">
</div>
<!--<div class="loadeding"></div>-->
</div>
</div>
</section>
it shows like this
it must be like this
Add this path in your index.html file like mentioned below if not working from angular.json:
JS path
<script src="assets/ltr/js/owl-carousel/owl.carousel.js"></script>
CSS path
<link rel="stylesheet" href="assets/ltr/css/owl.carousel.css">
Or either make sure your path is correct. Check it in your installed package and copy the exact path from there.
I am using the swiper in the jquery version from idangerous. I load and initialize it with require.js like this:
define(['jquery','swiper'],function($){
$( document ).ready(function() {
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'horizontal',
loop: true,
speed:100,
// If we need pagination
// Navigation arrows
nextButton: '.m-stage-button-next',
prevButton: '.m-stage-button-prev',
});
});
});
<div style="width: auto; height: 300px;" class="swiper-wrapper swiper-container">
<div class="m-stage-slide swiper-slide">
<a href="#">
<img class="m-stage-slide-image" src="../img/slide1.jpg" alt="">
</a>
<div class="m-stage-slide-content">
<div class="m-stage-slide-text">
<h1 class="m-stage-slide-heading">{{sContent.headline}}</h1>
<span class="m-stage-slide-tagline">{{sContent.text}}</span>
</div>
<span class="c-btn c-btn--tertiary c-btn--arrow">{{sContent.btn_txt}}</span>
</div>
</div>
<div class="m-stage-slide swiper-slide">
<a href="#">
<img class="m-stage-slide-image" src="../img/slide2.jpg" alt="">
</a>
<div class="m-stage-slide-content">
<div class="m-stage-slide-text">
<h1 class="m-stage-slide-heading">{{sContent.headline}}</h1>
<span class="m-stage-slide-tagline">{{sContent.text}}</span>
</div>
<span class="c-btn c-btn--tertiary c-btn--arrow">{{sContent.btn_txt}}</span>
</div>
</div>
<div class="m-stage-button-prev"></div>
<div class="m-stage-button-next"></div>
</div>
(Those {{}} thingis are right now just placeholders)
Everything is loaded and rendered fine, but as soon as I try to swipe, I get
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'
Any hints?
Instead of this:
<div style="width: auto; height: 300px;" class="swiper-wrapper swiper-container">
</div>
Try separating out your DIV's, with the swiper container on the outside:
<div style="width: auto; height: 300px;" class="swiper-container">
<div class="swiper-wrapper"></div>
</div>
Check the quick start guide (point 3) for an example of the correct HTML markup for SwiperJS:
http://www.idangero.us/swiper/get-started/
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
In my case, it happens in this code/scenario (I use swiperContainer - HTMLElement - more than one time ==> logos in this example).
<!-- error code use logos twice -->
<div class="swiper-container logos">
<div class="swiper-wrapper logos">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
</div>
</div>
var mySwiper = new Swiper('.logos', {
speed: 400
});
Throw this error:
Very easy to fix this issue (Remove logos from this element <div class="swiper-wrapper logos">).
I don't exactly know, what the failure was. I switched to Swiper 2.7.x and this worked without a single problem.
Seems like Swiper 3.x and Require with almond have some problems at the moment.
I am using the swiper from idangerous in an Angular 1.5 application. I got the same error when swiping slides with mouse, no error changing slides by clicking on arrows.
For me this was a timing issue. I solved it by moving the init of the swiper var mySwiper = new Swiper('.swiper-container', {... to where the view was done rendering.
The quickest solution for this is to remove the CLASS 'logos' and add it as an ID 'logos' to the same element. After that select the ID as the selector in your javascript file.
Eg: HTML
<div id="logos" class="swiper-container"> <!-- This line is edited -->
<div class="swiper-wrapper logos">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
</div>
</div>
Eg: JavaScript
//.logo changed to #logo on the next line
var mySwiper = new Swiper('#logos', {
speed: 400
});
This happened to me when i tried to use some code provided from a tutorial...I checked the official docs and used their example and it worked without problems
https://swiperjs.com/get-started
Parallax content slider works once, but then fails to work, without any error. here is the example http://vilamihu.didacticmedia.ro/ , and here are the important bits of code:
<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
<!--end slider -->
<!---strat-date-piker---->
<link rel="stylesheet" href="css/jquery-ui.css"/>
<script src="js/jquery-ui.js"></script>
<script>
$(function () {
$("#datepicker,#datepicker1").datepicker();
});
</script>
<!---/End-date-piker---->
<!--<link type="text/css" rel="stylesheet" href="css/JFGrid.css" />-->
<link type="text/css" rel="stylesheet" href="css/JFFormStyle-1.css"/>
<script type="text/javascript" src="js/JFCore.js"></script>
<script type="text/javascript" src="js/JFForms.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
Those are in <head>. Here is the body:
<div id="da-slider" class="da-slider">
<div class="da-slide">
<div class="da-img">
<img src="images/slideprimu.jpg" alt="" class="class1" />
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide1.jpg" alt="" class="class1"/>
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide2.jpg" alt="" class="class1"/>
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide3.jpg" alt="" class="class1"/>
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide4.jpg" alt="" class="class1"/>
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide5.jpg" alt="" class="class1"/>
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide6.jpg" alt="" class="class1"/></div>
</div>
<!--/slide -->
</div>
and here is the jquery:
$(document).ready(function () {
$('#da-slider').cslider({
current: 4,
// index of current slide
bgincrement: 50,
// increment the background position
// (parallax effect) when sliding
circular: true,
autoplay: true,
// slideshow on / off
interval: 500
// time between transitions
});
});
Note: the links to photos are good. if I change the "current" setting, then it will start at that photo, go once, and stop. Any ideas will be greatly appreciated! Thanks!
Try this
$(document).ready(function () {
$('#da-slider').cslider({
current: 4,
// index of current slide
bgincrement: 50,
// increment the background position
// (parallax effect) when sliding
circular: true,
autoplay: true,
// slideshow on / off
intervalSec: 500
// time between transitions
});
});
I have just changed name of value interval to intervalSec
as per the documentation other things should be okay
Also in the provided link of website you are using older version of jQuery v1.8.3
If possible update it to latest version CDN, as for CSS3 newer version works better(Note: which does not support some old browsers)
Update: In the given website Link there are two JQuery UI of different versions used
jQuery-UI 1.9.2
jQuery-UI 1.9.1
Please remove the older version(the js/jquery-ui.min.js) to avoid any conflict..
today I was trying to solve exactly the same problem.
Even though this answer is probably not required anymore, I will add it for further coders that will encounter the same problem.
The root cause is in bgincrement value. If there is no background that it can "move" it will stop responding without any error. And its total mess.
Setting bgincrement to zero made the slider work again:
$(document).ready(function () {
$('#da-slider').cslider({
autoplay : true,
bgincrement : 0
});
});
I had the same problem... please deactivate all other jquery plugins, let only the slider at place. Do not forget to delete the initiation codes in your custom js file or in your html file as well ! Normally your slider works online after all.
Then you can re-add your plugins step by step and you will recognize with which plugin your slider has incompatibility. I had jQuery Timelinr 0.9.54 plugin which blocked my slider.
I'm using Owl Carousel and have been trying to add animated captions (just a simple fadein on slide display) but can't seem to figure out how to do it.
I have the opacity of all the captions set to 0 and then add a class named "animate-me" (with jQuery) to the captions. The first one fades in and then all the others are constantly displayed.
Here's what I have so far on jsbin... http://jsbin.com/OGehUKEh/3/edit
You need to use Owl Carousel callbacks. I found the callbacks you need.
$("#owl-example").owlCarousel({
beforeMove: function(){
// BEFORE going to the next slide (hide captions)
},
afterMove: function(){
// AFTER going to next slide (show captions)
}
})
I've successfully done this using jCapSlide (http://tympanus.net/codrops/2009/11/23/jcapslide-a-jquery-image-caption-plugin/).
Here's the HTML:
<div class="owl-carousel">
<div class="item" id="id_a"> <!-- The ID is for jCapSlide -->
<img alt="text" src="imagelocation"><!-- This is my image -->
<div class="overlay" style="display:none;"></div> <!-- this is the jCapSlide code -->
<div class="ic_caption">
<h3>TITLE To display</h3>
<p class="ic_text">Caption</p>
</div>
</div>
<div class="item" id="id_b">
<img alt="text" src="another image">
<div class="overlay" style="display:none;"></div>
<div class="ic_caption">
<h3>Title 2</h3>
<p class="ic_text">More Text</p>
</div>
</div>
<!-- More pictures in the same fashion as above -->
</div>
Include the CSS in the HEAD
<link rel="stylesheet" href="/css/owl.carousel.css">
<link rel="stylesheet" href="/css/caption/style.css">
Include the JScript just before the
<script src="/js/jquery-1.11.1.js"></script>
<script src="/js/jquery.capSlide.js"></script>
<script src="/js/owl.carousel.js"></script>
<script type="text/javascript">
$(window).load(function(){
$(".owl-carousel").owlCarousel({responsiveClass:true, autoplay:true, autoplayTimeout: 1000, autoplayHoverPause:true, autoWidth:true, loop:true});
$("#id_a").capslide({caption_color : '#FFFFFF', caption_bgcolor : '#002296', overlay_bgcolor : '#002296', border : '', showcaption : true});
$("#id_b").capslide({caption_color : '#FFFFFF', caption_bgcolor : '#002296', overlay_bgcolor : '#002296', border : '', showcaption : true});
</script>
jCapSlide is very flexible, and you can mess with the CSS and JS to get the exact colours/animation you want.
Debbie
Please can anyone tell me the coding in terms of Js, css for displaying image effect like one in http://dalailama.com/ ie changing of images one after another. If possible let me know about adding video link in the sidebar with the minor screen.
This should do the trick:
HTML:
<div id="testers">
<div class="tester">
<img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
</div>
</div>
<div id="morework">
<div class="holderdiv">
<div class="tester">
<img src="http://www.swwebs.co.uk/images/google-pagerank.jpg" alt="" />
</div>
</div>
<div class="holderdiv">
<div class="tester">
<img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
</div>
</div>
</div>
CSS:
#morework{display:none;}
jQuery:
$(document).ready(function(){
function runIt(){
$('#morework').find('.holderdiv').each(function(i, elem) {
$("#testers").delay(5000).fadeOut(1000, function() {
$(this).html($(elem).html());
}).fadeIn(1000, runIt);
});
};
runIt()
});
Check it out in action here - http://jsfiddle.net/sfsPx/