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.
Related
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.
The code I have :
<div id="cubeSpinner">
<div class="face one">
<img src="/images/Windows%20Logo.jpg" class="">
</div>
<div class="face two">
<img src="/images/Turtle.jpg" class="">
</div>
<div class="face three">
<img src="/images/Rainbow%20Worm.jpg" class="">
</div>
<div class="face four">
<img src="/images/Birdman.jpg" class="">
</div>
</div>
How to simplify it using Jade? I know I can use for loop like this for same class for multiple divs but what about the img tags inside them ?Is there a way to simply this in Jade? Thanks in advance
- for(var x = 1;x <= 3;x++)
.nameOfClass
If you pass an array of objects like below to your jade template
var images = [
{"src": "example1.Jpg", "className":"one"},
{"src": "exampl2.Jpg", "className":"two"},
{"src": "exampl3.Jpg", "className":"three"},
{"src": "exampl4.Jpg", "className":"four"}
]
In your template you can display it like this
div.cubeSpinner
each image in images
div.fade(class=image.className)
img(src=image.src)
I'm quite new to jQuery and I have come up with script which affects the HTML below. The script works perfectly and I have gotten it to whether I would like. The problem I am having
is when I'm duplicating the HTML and the script, once clicked, only shows the last project-info and project-images within the document. I've tried quite a few different methods just as
$(this).children()
but I can't seem to get any to work. Any help would be much appreciated.
Thank you
jQuery
$(document).ready(function() {
$('.apple').click(function() {
$('#darken').addClass('dark');
$('.project-info').delay('1000').slideDown('slow');
$('.project-images').delay('1000').fadeIn('slow');
});
});
$(document).ready(function() {
$('.close').click(function() {
$(".project-info, .project-images").fadeOut('slow');
});
});
HTML
<div class="apple">
<img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/>
</div>
<div class="project-info" style="display:none;">
<div class="project-title">
<h1>hello world</h1>
</div>
<div class="details">
<p>dkusdufhu suskueh sukh suefhuksdfnkuesnfukneukf nseuknfukenfuk nukefnuksn fukfuksukfnuksenf unseukfunfukfunufen u u u ef euhfuehfeufu g gfd gerjkg rjgrjg j js grg rgsg dkusdufhu suskueh sukh</p>
<div class="links">
link
</div>
<div class="close"></div>
</div><!-- end of project info -->
</div>
<div class="project-images" style="display:none;">
<div class="-images">
<img src="http://cdn4.spiegel.de/images/image-499233-galleryV9-grcy.jpg" />
<img src="http://cdn4.spiegel.de/images/image-499233-galleryV9-grcy.jpg" />
</div>
<div class="close end"></div>
</div> <!-- Project Images -->
</div> <!-- # Darken -- >
You're nearly there. Children wouldn't work in the above example because the divs with class 'apple' don't have any children. You need to move that first closing tag to the bottom of the portfolio item so that your html for each portfolio item is structured like this:
<!--PORTFOLIO ITEM-->
<div class="apple">
<!-- ICON GOES HERE-->
<img src="http://mybroadband.co.za/photos/data/500/apple-logo.jpg"/>
<!-- PROJECT INFO GOES HERE-->
<div class="project-info" style="display:none;">
</div>
<!-- PROJECT IMAGES GOES HERE-->
<div class="project-images" style="display:none;">
</div>
</div>
I.e. the divs with classes 'project-info' and 'project-images' are inside the 'apple' div. Then change this:
$('.project-info').delay('1000').slideDown('slow');
$('.project-images').delay('1000').fadeIn('slow');
to this:
$(this).children('.project-info').delay('1000').slideDown('slow');
$(this).children('.project-images',this).delay('1000').fadeIn('slow');
If you've updated your html correctly, $(this) will be pointing to a div element that does indeed have children with classes 'project-info' and 'project-images'. Here's an updated JSFiddle that should do you what you want: http://jsfiddle.net/8k3Ms/1/
I have one page where fancybox works,
http://interscript.pl/domy/?p=628
and another where it doesn't. Where is mistake?
http://interscript.pl/domy/?cat=4
EDIT:
<a href="http://interscript.pl/domy/wp-content/uploads/Tulips.jpg" data-title="asdfasdfas dfsad 12341234 23" data-link="" class="fancybox" rel="grupa">
<div class="wpis">
<div class="obszar">
<img src="http://interscript.pl/domy/wp-content/uploads/Tulips-160x125.jpg">
</div>
<div class="hover"></div>
</div>
</a>
JS: $('a.fancybox').fancybox();
You've applied fancybox to all "a tags " -> $('a.fancybox').fancybox();
But your "image" is not "a" -> http://interscript.pl/domy/?cat=4
<div class="obszar">
<img src="http://interscript.pl/domy/wp-content/uploads/Tulips-160x125.jpg">
</div>
insert this code in your jquery codes
$(".obszar img").fancybox();
or edit your code such this;
<div class="obszar">
<img src="http://interscript.pl/domy/wp-content/uploads/Tulips-160x125.jpg">
</div>
I have a paginated list of video thumbnails I want to display in a Bootstrap fluid grid. I'm using a nested ng-repeat to first iterate over each list, for pagination, and an inner ng-repeat to iterate over each video thumbnail in the subarray. The grid is 3x6 so when the inner ng-repeat's index is a multiple of 5 (assuming $index starts at 0), I want to close a fluid row and start a new one.
<div ng-repeat="thumbList in thumbLists">
<div ng-repeat="thumb in thumbList" class="row-fluid">
<div class="span2">
<a href="{{ thumb.URL }}">
<img src="{{ thumb.thumbnailURL }}" width="160" height="85" alt="" class="img-responsive">
</a>
</div>
<!-- ng-switch? -->
</div>
</div>
The lists are populated by a REST service, such that when a user clicks on a 'next' button, a new array list' is pushed onto the 'lists' and an animation will slide over each 3x6 grid. The structure looks like:
$scope.thumbLists = [
[{URL: url, thumbnailURL: thumburl}, ...], // init
[{URL: url, thumbnailURL: thumburl}, ...], // pushed when user clicks 'next'
... etc
];
Everything I have is working properly, I'm just not sure how to conditionally add in the HTML to close a row and start a new one once that row hits 6 since the thumbnails are given in a single array.
For example, where I have the commented ng-switch, could I do something like:
<div ng-switch="$index">
<div ng-switch-when="$index % 6 == 5">
</div>
Using 1.0.8 stable release. Must support IE8.
Temporary solution - removing the left margin for each element that is the first in it's row:
<div ng-repeat="thumbList in thumbLists">
<div class="row-fluid>
<div ng-repeat="thumb in thumbList" class="span2" ng-class="{nomargin: $index % 6 == 0}">
<a href="{{ thumb.URL }}">
<img src="{{ thumb.thumbnailURL }}" width="160" height="85" alt="" class="img-responsive">
</a>
</div>
</div>
</div>
Would still like to find a solution that where I can conditionally insert/remove HTML, perhaps using a directive.
Would ng-grid work for you? Might save you having to deal with the details.
http://angular-ui.github.io/ng-grid/
This works with ng-switch -- but may need some more tweaking to avoid the extra hidden span markup...
<div ng-repeat="thumb in thumbList">
<span ng-switch="$index % 5">
<div class="row" ng-switch-when="0">
<div class="col-sm-2"><img src="{{thumbList[$index+0].url}}" class="img-responsive"></div>
<div class="col-sm-2"><img src="{{thumbList[$index+1].url}}" class="img-responsive"></div>
<div class="col-sm-2"><img src="{{thumbList[$index+2].url}}" class="img-responsive"></div>
<div class="col-sm-2"><img src="{{thumbList[$index+1].url}}" class="img-responsive"></div>
<div class="col-sm-2"><img src="{{thumbList[$index+2].url}}" class="img-responsive"></div>
</div>
</span>
</div>
http://bootply.com/86985