0

owl carousel 2 を使用して単純なスライド式カルーセルを作成しています。現時点では画像のみを使用していますが、.html ファイルの代わりに .html ファイルを使用できるようにしたいと考えています。これらのhtmlファイルには、画像をロードできる複数のdivがあり、画像全体がスライドするのではなく、変更されるだけです。どうすればこれを行うことができるかについての提案はありますか?

現在の HTML ファイル:

<div id="carousel" class="owl-carousel">
    <div class="item"><img src="Images/1.jpg" alt="img1" /></div>
    <div class="item"><img src="Images/2.jpg" alt="img2" /></div>
    <div class="item"><img src="Images/3.jpg" alt="img3" /></div>
    <div class="item"><img src="Images/4.jpg" alt="img4" /></div>
</div>

    <script src="Scripts/jquery-1.9.0.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script src="Scripts/owl.carousel.js"></script>
    <script src="Scripts/app.js"></script>
4

1 に答える 1

1

HTML要素について言っている場合。それから私はあなたのための解決策を持っています. それでは、Owl Carousel と Bootstrap を使用して Client Testimonials エリアを作成する方法を教えてください。

owl.carousel.css、owl.theme.default.min.css、owlcarousel.js が接続されていることを確認してください。

HTML コード

<section id="clients-reviews" >
        <div class="container">
                    <div class="row">
                        <div class="col-lg-12 text-center">
                            <div id="owl-client-reviews" class="owl-carousel owl-theme">
                                <div class="review">
                                    <p>
                                        " 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."
                                    </p>
                                    <br>
                                    <h4><span class="name">Salam mohd |</span>  <span class="post">web designer</span> </h4>
                                </div>
                                <div class="review">
                                    <p>
                                        " 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."
                                    </p>
                                    <br>
                                    <h4><span class="name">Salam mohd |</span>  <span class="post">web designer</span> </h4>
                                </div>
                                <div class="review">
                                    <p>
                                        " 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."
                                    </p>
                                    <br>
                                    <h4><span class="name">Salam mohd |</span>  <span class="post">web designer</span> </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
</section>

CSSはこのようになります

#clients-reviews .review p{
    font-family: 'PT Serif Caption', serif;
    color: #ffffff;
    font-size: 18px;
}
#clients-reviews .review span.name{

    color:#fed136;
}
#clients-reviews .review span.post{
        font-family: 'PT Serif Caption', serif;
    font-weight: 300;
    font-size: 14px;
    color: #fed136;
    text-transform: none;
}
#clients-reviews .owl-theme .owl-controls .owl-nav [class*=owl-] {
    background: transparent;
    color: #ffffff;
    bborder: 2px solid  #fed136;
    font-size: 14px;
    padding: 0 10px;
    line-height: 14px;
}

あなたのJSファイルは

 $("#owl-client-reviews").owlCarousel({
        items:1,
        loop:true,
        autoplay:true,
        autoHeight: false,
        autoHeightClass: 'owl-height',
        dots:false,
        nav:true,
        navText:[
            "<i class='fa fa-angle-left fa-2x'></i>",
            "<i class='fa fa-angle-right fa-2x'></i>"
        ]
    });

ノート*

次と前にFontawesome Iconsを使用しました。アイテムを増やしたい場合は、items プロパティを使用します。

ありがとう:)

于 2014-08-14T14:02:28.273 に答える