如何将Owl Carousel设置为自动播放

时间:2016-07-10 11:19:24

标签: jquery owl-carousel

我正在使用Owl Carousel jquery插件。我想使用 <script src="{{base_url()}}assests/new/js/owl-carousel.js"></script> <script src="{{base_url()}}assests/new/js/owl.autoplay.js"></script> $(document).ready(function(){ var owl = $('.owl-carousel'); owl.owlCarousel({ items:1, loop:true, autoplay:true, autoplayTimeout:1000, autoplayHoverPause:true }); }); 。但它不起作用:

                    <div class="owl-carousel owl-slider m20" id="owl-carousel-slider" data-inner-pagination="true" data-white-pagination="true" data-nav="false" data-autoPlay="true">




                        <div>
                            <div onclick="goToProduct('home-kitchen');" class="bg-holder cursor-pointer">
                                <img src="{{base_url().'assests/new/img/sliders/home-kitchen.jpg'}}" />
                                <div class="bg-mask display-none"></div>
                                <div class="bg-front vert-center text-white text-center">
                                    <h2 class="text-uc"></h2>
                                    <p class="text-bigger"></p>
                                    <p class="text-hero"></p>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div onclick="goToProduct('digital-accessories');" class="bg-holder">
                                <img src="{{base_url().'assests/new/img/sliders/digital-accessories.jpg'}}"  />
                                <div class="bg-mask display-none"></div>
                                <div class="bg-front vert-center text-white text-center">
                                    <h2 class="text-uc"></h2>
                                    <p class="text-bigger"></p>
                                    <p class="text-hero"></p>
                                </div>
                            </div>
                        </div>


                    </div>

我的滑块:

1. After installing Windroy verify that it runs without error. 
2. In Windroy open a browser and download the Apk Installer from http://www.appsapk.com/apk-installer/ and install it once it gets downloaded 
3. Lets assume you have installed Windroy in 'C:\BaseInstall' folder.
4. Now open Windows Explorer, copy the apk of the app you want to install and paste it to 'C:\BaseInstall\Windroy\windroy_root\data\app' folder 
5. Now start Windroy and go to installed apps and you will see the 'app' you have copied installed in Windroy.

我的网站:

http://www.shadyab.com/category/tehran/commodity/all

2 个答案:

答案 0 :(得分:2)

如果您想使用自动播放,则不应使用items:1

答案 1 :(得分:2)

尝试使用此代码:

autoplayTimeout

适用于版本 2.2.1

我认为可能出现的问题可能是autoplay

当我将它包含在上面的代码中时,它只进行了第一次滑动和停止。但是当我删除它时,它开始根据需要无限循环import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { AppComponent} from './app-component'; @NgModule({ imports: [OtherModules, NgbModule.forRoot()], declarations: [AppComponent], bootstrap: [AppComponent] ...

希望这会有所帮助。