Есть ли способ подключить карусель к кнопкам, которые также используются для чего-то еще? - PullRequest
1 голос
/ 16 мая 2019

У меня есть 2 изображения в виде кнопок в HTML.Они используются в качестве элементов управления для карусели с текстом.Как сделать отдельную карусель с изображениями, использующими те же элементы управления?

Вот мой код:

HTML:

<section class="testimonial_area section_gap">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="testi_img">
                        <img class="img-fluid" src="img/testi-img.jpg" alt="">
                    </div>
                </div>
                <div class="col-lg-5 offset-lg-1">
                    <div class="owl-carousel active_testimonial owl-loaded owl-drag">
                        <!-- single testi -->

                        <!-- single testi -->

                    <div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(-740px, 0px, 0px); transition: all 0s ease 0s; width: 2220px;"><div class="owl-item cloned" style="width: 370px;"><div class="single_testi">
                            <div class="quote">
                                <img class="img-fluid" src="img/quote.png" alt="">
                            </div>
                            <div class="testi_content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                                    commodo consequat.</p>
                            </div>
                            <div class="testi_author">
                                <div class="a-desc">
                                    <h4>Marvel Maison</h4>
                                    <p>Chief Executive, Amazon</p>
                                </div>
                            </div>
                        </div></div><div class="owl-item cloned" style="width: 370px;"><div class="single_testi">
                            <div class="quote">
                                <img class="img-fluid" src="img/quote.png" alt="">
                            </div>
                            <div class="testi_content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                                    commodo consequat.</p>
                            </div>
                            <div class="testi_author">
                                <div class="a-desc">
                                    <h4>Marvel Maison</h4>
                                    <p>Chief Executive, Amazon</p>
                                </div>
                            </div>
                        </div></div><div class="owl-item active" style="width: 370px;"><div class="single_testi">
                            <div class="quote">
                                <img class="img-fluid" src="img/quote.png" alt="">
                            </div>
                            <div class="testi_content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                                    commodo consequat.</p>
                            </div>
                            <div class="testi`enter code here`_author">
                                <div class="a-desc">
                                    <h4>Marvel Maison</h4>
                                    <p>Chief Executive, Amazon</p>
                                </div>
                            </div>
                        </div></div><div class="owl-item" style="width: 370px;"><div class="single_testi">
                            <div class="quote">
                                <img class="img-fluid" src="img/quote.png" alt="">
                            </div>
                            <div class="testi_content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                                    commodo consequat.</p>
                            </div>
                            <div class="testi_author">
                                <div class="a-desc">
                                    <h4>Marvel Maison</h4>
                                    <p>Chief Executive, Amazon</p>
                                </div>
                            </div>
                        </div></div><div class="owl-item cloned" style="width: 370px;"><div class="single_testi">
                            <div class="quote">
                                <img class="img-fluid" src="img/quote.png" alt="">
                            </div>
                            <div class="testi_content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                                    commodo consequat.</p>
                            </div>
                            <div class="testi_author">
                                <div class="a-desc">
                                    <h4>Marvel Maison</h4>
                                    <p>Chief Executive, Amazon</p>
                                </div>
                            </div>
                        </div></div><div class="owl-item cloned" style="width: 370px;"><div class="single_testi">
                            <div class="quote">
                                <img class="img-fluid" src="img/quote.png" alt="">
                            </div>
                            <div class="testi_content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
                                    commodo consequat.</p>
                            </div>
                            <div class="testi_author">
                                <div class="a-desc">
                                    <h4>Marvel Maison</h4>
                                    <p>Chief Executive, Amazon</p>
                                </div>
                            </div>
                        </div></div></div></div><div class="owl-nav"><div class="owl-prev"><img src="img/cprev.png"></div><div class="owl-next"><img src="img/cnext.png"></div></div><div class="owl-dots disabled"></div></div>
                </div>
            </div>
        </div>
    </section>

JS:

$('.active_testimonial').owlCarousel({
        items: 1,
        loop: true,
        dots: false,
        autoplay: false,
        nav: true,
        navText: [ "<img src='img/cprev.png'>", "<img src='img/cnext.png'>" ]
    });

Я не знаю, с чего начать, и ДЕЙСТВИТЕЛЬНО благодарен за помощь.

Извините, если мой вопрос не отформатирован должным образом.Я впервые задаю вопрос здесь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...