I am trying to set an owl carousel on my landing page . It works fine when i browse it from my working directory . But when i upload it on server (even in local server) it set display:none in css .
I tried changing css and js files but it is not working .
here is my code ---
$(document).ready(function(){
jQuery("#main-slider").owlCarousel({
autoplay:true,
loop:true,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
items:1,
margin:30,
stagePadding:30,
smartSpeed:450
});
});
<div id="main-slider" class="owl-carousel owl-theme">
<div class="item">
<img src="img/slider.jpg" alt="" />
</div>
<div class="item">
<img src="img/slider2.jpg" alt="" />
</div>
<div class="item">
<img src="img/slider3.jpg" alt="" />
</div>
</div>
If you've used #main-slider id more than once on this page you can get error. Use it once.
Related
I tried to add script.js to angular.json and use it in one component so that's not working for those who can suggest to add script tag to my html file thats not a good idea so can someone please suggest another idea or what is missed to make my script work. Thank you
Here is my script :
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
dots:false,
nav:true,
mouseDrag:false,
autoplay:true,
animateOut: 'slideOutUp',
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
});
file.html:
<header>
<div class="owl-carousel owl-theme">
<div class="item">
<img src="https://cdn.pixabay.com/photo/2017/10/24/10/30/business-2884023_960_720.jpg" alt="images not found">
<div class="cover">
<div class="container">
<div class="header-content">
<div class="line"></div>
<h2>Teimagine Digital Experience with</h2>
<h1>Start-ups and solutions</h1>
<h4>We help entrepreneurs, start-ups and enterprises shape their ideas into products</h4>
</div>
</div>
</div>
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2016/03/09/09/22/workplace-1245776_960_720.jpg" alt="images not found">
<div class="cover">
<div class="container">
<div class="header-content">
<div class="line animated bounceInLeft"></div>
<h2>Reimagine Digital Experience with</h2>
<h1>Intelligent solutions</h1>
<h4>We help entrepreneurs, start-ups and enterprises shape their ideas into products</h4>
</div>
</div>
</div>
</div>
</header>
Way 1:
Refer the scripts inside the angular-cli.json (angular.json when
using angular 6+) file.
"scripts": [
"../path"
];
then add in typings.d.ts (create this file in src if it does not
already exist)
declare var variableName:any;
Import it in your file as
import * as variable from 'variableName';
Reference https://stackoverflow.com/a/44817445/9640128
Way 2:
you can add multiple scripts when your component loads dynamically
Reference : https://stackoverflow.com/a/49981918/9640128
I need to put a href in the image to link with a url, this would be done in the three images that contain the code below. When someone "click" on the image go to another page.
<div class="header_slider">
<script src="{{skin url=''}}js/camera.js" type="text/javascript">
</script>
<script type="text/javascript">// <![CDATA[
/* index slider */
jQuery(function(){
jQuery('#camera_wrap').camera({
alignmen: 'topCenter',
height: '32.882%',
minHeight: '50px',
loader : false,
fx: 'simpleFade',
navigationHover:false,
thumbnails: false,
playPause: false
});
});
// ]]></script>
<div class="fluid_container">
<div class="camera_wrap camera_orange_skin" id="camera_wrap">
<div data-src="{{media url="wysiwyg/slideshow/banner1.png"}}">
<div class="camera_caption fadeIn">
<div class="right_slider_side sl_1"></div>
</div>
</div>
<div data-src="{{media
url="wysiwyg/slideshow/OfertaCarrossel_Kits_0002.005.00020.jpg" }}">
<div class="camera_caption fadeIn">
<div class="right_slider_side sl_2"></div>
</div>
</div>
<div data-src="{{media url="wysiwyg/slideshow/OfertaCarrossel_Sofa_0006.004.00021_FIN.jpg"}}">
<div class="camera_caption fadeIn">
<div class="right_slider_side sl_3"></div>
</div>
</div>
</div>
<div class="clear"></div>
You could add a class on each div with data-src tag and use JQuery on click event to redirect them to another page. Add another data tag to store the destination url.
For example on the HTML
<div class="clickMe" data-destination="http://www.google.com" data-src="{{media url="wysiwyg/slideshow/banner1.png"}}">
And your Javascript
$('.clickMe').on("click", function() {
window.location.href = $(this).data('destination');
});
EDIT: Actually, the plugin that you use have the functionality built into it already. On your div add data-link attribute like below. Read through all of its functionality here https://www.pixedelic.com/plugins/camera/
<div data-link="http://www.google.com" data-src="{{media url="wysiwyg/slideshow/banner1.png"}}">
I'm using the excellent slider OWL Carousel 2. http://www.owlcarousel.owlgraphic.com/
My issue is the URLhashListener option only allows you to create a link to a specific slide but does not allow the user to copy the url link from the current slide to share. I would assume the correct behaviour of this option would be the URL updates as the user moves to the next slide so they can then copy that unique URL.
http://www.owlcarousel.owlgraphic.com/demos/urlhashnav.html
My OWL code:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var owl = $(".owl-carousel");
owl.owlCarousel({
smartSpeed:1500,
items:1,
lazyLoad:true,
loop:true,
URLhashListener:true,
startPosition: 'URLhash',
nav: true,
});
});
//]]>
</script>
I'm using data-hash in my image tag to generate the hash id for each image which works fine (you can link to the specific slide). But when you click next and arrive at the next slide the URL will remain as #HASHID. The link no longer corresponds to the current slide.
<img id="zm" class="owl-lazy owlimg" data-hash="slideID" data-src="myimagelink.jpg">
Here's a live page with the url hash nav working:
http://www.legacyart.pinkpoliceman.com/collections/birds-of-prey/
With hash:
http://www.legacyart.pinkpoliceman.com/collections/birds-of-prey/#slide14
I'm sure these docs hold part of the answer but I'm not sure how to piece it all together. http://www.owlcarousel.owlgraphic.com/docs/api-events.html
Update (Native solution)
It seems that once you add data-hash to your items, the plugin take care about all the functionality.
http://jsbin.com/javuwod/edit?html,js
Original Answer
You can easily "listen" to slide changed event using changed.owl.carousel, then you can change the hash according the slide's index.
var owl = $('.owl-carousel');
owl.owlCarousel({
margin:10,
nav:true,
URLhashListener: true,
startPosition: 'URLHash'
});
// Listen to owl events:
owl.on('changed.owl.carousel', function(event) {
location.hash = 'slide' + event.property.value;
})
<link href="http://www.owlcarousel.owlgraphic.com/assets/css/docs.theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.js"></script>
<div id="demos">
<div class="owl-carousel">
<div class="item" data-hash="slide0">
<h4>1</h4>
</div>
<div class="item" data-hash="slide1">
<h4>2</h4>
</div>
<div class="item" data-hash="slide2">
<h4>3</h4>
</div>
<div class="item" data-hash="slide3">
<h4>4</h4>
</div>
<div class="item" data-hash="slide4">
<h4>5</h4>
</div>
<div class="item" data-hash="slide5">
<h4>6</h4>
</div>
<div class="item" data-hash="slide6">
<h4>7</h4>
</div>
<div class="item" data-hash="slide7">
<h4>8</h4>
</div>
<div class="item" data-hash="slide8">
<h4>9</h4>
</div>
<div class="item" data-hash="slide9">
<h4>10</h4>
</div>
<div class="item" data-hash="slide10">
<h4>11</h4>
</div>
<div class="item" data-hash="slide11">
<h4>12</h4>
</div>
</div>
</div>
http://jsbin.com/javuwod/edit?html,js
I'm using bxSlider to run a slideshow. I needed to use external captions, which I did by broadly following this answer.
This is working well for the caption itself, but I also want to change the URL that each caption's link goes to.
I've made an attempt at hacking this together myself using the caption code as inspiration, and various answers from this thread, but I've hit a wall of not knowing what I'm doing.
Code is below, does anybody have any suggestions? I'm sure it's super basic but I just don't JavaScript, which means I'm missing lots of core concepts that would allow me to work this out myself.
<div class="bxslider">
<div class="slide id-0">
<img src="/images/index-01.jpg" title="Caption 1" />
</div>
<div class="slide id-1">
<img src="/images/index-02.jpg" title="Caption number two" />
</div>
<div class="slide id-2">
<img src="/images/index-03.jpg" title="Third caption" />
</div>
</div>
<div class="caption-1">
<div class="cap-cont">
<div class="cap-text"><div class="slider-txt"></div></div>
<a class="box-link">Find out more</a>
</div>
</div>
<script type="text/javascript">
$('.bxslider').bxSlider({
auto: true,
speed: 2000,
pause: 6000,
pager: false,
controls: true,
responsive:true,
onSliderLoad: function(currentIndex) {
var slideNum = '.id-' + currentIndex;
$(".slider-txt").html($('.bxslider .slide' + slideNum).find("img").attr("title"));
$(".link-txt").html($('.bxslider .slide' + slideNum).find("a").attr("href"));
},
onSlideAfter: function($slideElement, oldIndex, newIndex) {
$(".slider-txt").html($slideElement.find("img").attr("title"));
$(".link-txt").html($slideElement.find("a").attr("href"));
$("a.link-txt").attr("href", "http://cupcream.com");
}
});
</script>
I have a carousel slider,
when I click on a thumb an image needs to be loaded in the large banner.
How can I do this?
It needs to be smooth, it shows a large image, when clicking on a thumb that thumb needs to fade-in over the existing image. But first I need to get it working thow.
Example here
New other example is here!
<div class="big">
<img src="http://placehold.it/476x300&text=first" />
<img src="http://placehold.it/476x300&text=sec" />
<img src="http://placehold.it/476x300&text=third" />
<img src="http://placehold.it/476x300&text=four" />
<img src="http://placehold.it/476x300&text=five" />
</div>
<div class="owl-carousel small">
<div class="item">
<img src="http://placehold.it/238x150&text=first" />
</div>
<div class="item">
<img src="http://placehold.it/238x150&text=sec" />
</div>
<div class="item">
<img src="http://placehold.it/238x150&text=third" />
</div>
<div class="item">
<img src="http://placehold.it/238x150&text=four" />
</div>
<div class="item">
<img src="http://placehold.it/238x150&text=five" />
</div>
</div>
script:
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
responsiveClass: true,
responsive: {
0: {
items: 2,
nav: false
},
600: {
items: 3,
nav: false
},
1000: {
items: 4,
nav: false,
loop: false,
margin: 20
}
}
})
})
You need to attach an event handler to each image,
I see you are loading jQuery which makes this nice and easy
$(function(){
$(".big img:eq(0)").nextAll().hide();
$(".es-slides .es-slide-inner img").click(function(e){
var index = $(this).index();
$(".big img").eq(index).show().siblings().hide();
});
$('#basic_slider img').each(function(i,image){
$(image).on('click', function(){
$('.big').html('<img src=\''+ image.src + '\'/>');
});
});
});
We are using the jQuery each method to loop through each image in the carousel, then update the html inside the with an image tag that has the correct src for the image.
Alternatively you could show/hide the images in the .big container like your html already shows. This will probably work better for fading the images in and out as you wish.
Fiddle