当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - owl carousel slider second image does not load

问题描述:

I am using owl carousel in magento ,slider is working and first slide loads perfectly but when slider goes to second one slide ,it does not show anything,if anyone take a look at code and suggest something that would be nice ,I have below code

`

 <h2 class="filter-title" style="margin-top: 20px;"><span class="content"><strong>Featured Fashion

Dress</strong></span></h2>

<div class="owl-bottom-narrow owl-banner-carousel" style="margin-bottom:20px;">

<div id="banner-slider-demo-7" class="owl-carousel owl-theme" style="opacity: 1; display: block;">

<div class="owl-wrapper-outer"><div class="owl-wrapper" style="width: 4560px; left: 0px; display: block; transition: all 1000ms ease; transform: translate3d(0px, 0px, 0px);"><div class="owl-item" style="width: 1140px;"><div class="item" style="background:#f0f0f0;background-image:linear-gradient

(#e8e8e8,#f0f0f0);position:relative;border-radius:5px;">

<img src="{{media url="wysiwyg/porto/homepage/slider/05/01.png"}}" alt="">

<div class="content type1" style="position:absolute;top:30%;left:10%;text-

align:right">

<h2 style="font-weight:600;line-height:1;color:#08c">HUGE <b style="font-

weight:800">SALE</b></h2>

<p style="color:#777;font-weight:300;line-height:1;margin-bottom:15px">Now

starting at <span style="color:#535353;font-weight:400">$99</span></p>

<a href="#" style="font-weight:300;">Shop now &gt;</a>

</div>

</div></div><div class="owl-item" style="width: 1140px;"><div class="item" style="background:#f0f0f0;background-image:linear-gradient

(#e8e8e8,#f0f0f0);position:relative;border-radius:5px;">

<img src="{{media url="wysiwyg/porto/homepage/slider/05/02.png"}}" alt="">

<div class="content type2" style="position:absolute;top:16.6%;right:25%;text-

align:center">

<h2 style="font-weight:700;line-height:1;color:#004f7f;border-

color:#08c">SPECIAL</h2>

<h3 style="color:#08c;font-weight:700;line-height:1;margin-bottom:15px">OFFER</h3>

<p style="color:#004f7f;font-weight:400;line-height:1.4;margin-bottom:20px">Buy

new digital cameras &amp; <br>get lenses or accessories</p>

<a href="#" class="btn btn-default">Shop now!</a>

</div>

</div></div></div></div>

<div class="owl-controls clickable"><div class="owl-pagination"><div class="owl-page active"><span class=""></span></div><div class="owl-page"><span class=""></span></div></div></div></div>

<script type="text/javascript">

jQuery(function($){

$("#banner-slider-demo-7").owlCarousel({autoPlay:true,lazyLoad: true,stopOnHover:

true,pagination: true, autoPlay: true,navigation: false,slideSpeed : 500,paginationSpeed :

500,singleItem:true});

});

</script>

</div>

`

网友答案:

I have checked your site, it’s seems image file permission issue. Just check 02.png have 0644 file permission

分享给朋友:
您可能感兴趣的文章:
随机阅读: