Гладкий слайдер отображает только одну точку, когда динамический - PullRequest
0 голосов
/ 17 мая 2019

это мой первый вопрос на этом сайте, заранее прошу прощения за мой уровень английского (не мой родной язык)

Моя проблема: я работаю с плагином Slick Slider в Laravel55. Этот плагин отлично работает со статическим объявлением, но когда я пытаюсь сделать это динамически (используя сжатую переменную, отображаемую через цикл foreach), он портится с навигационной частью, он показывает мне только одну точку и никаких стрелок по бокам.

Просматривая похожие вопросы на этом сайте, я попытался сравнить исходный код между статическими и динамическими попытками, и он генерирует ту же версию с небольшим различием отступов.

Я проверил кодировку, проверил загрузку плагина js после jQuery, и, похоже, все в порядке.

Динамический

<section class="clients-feedback-area bg-white section_padding_100 clearfix" id="testimonials">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-md-10">
                    <div class="slider slider-for">
                        <!-- Client Feedback Text  -->
                        @foreach($testimonials as $t)
                        <div class="client-feedback-text text-center">
                            <div class="client">
                                <i class="fa fa-quote-left" aria-hidden="true"></i>
                            </div>
                            <div class="client-description text-center">
                                <p>“ {{$t->comment}} ”</p>
                            </div>
                            <div class="star-icon text-center">
                                @for($i=0;$i<$t->rate;$i++)
                                    <i class="ion-ios-star"></i>
                                @endfor
                            </div>
                            <div class="client-name text-center">
                                <h5>{{$t->name}}</h5>
                                <p>{{$t->department}}</p>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                <!-- Client Thumbnail Area -->
                <div class="col-12 col-md-6 col-lg-5">
                    <div class="slider slider-nav">
                    @foreach($testimonials as $tp)
                    <div class="client-thumbnail">
                        <img src="{{$tp->pAvatar}}">
                    </div>
                    @endforeach
                    </div>
                </div>
            </div>
        </div>
</section>

Статический

<section class="clients-feedback-area bg-white section_padding_100 clearfix" id="testimonials">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-md-10">
                    <div class="slider slider-for">
                        <!-- Client Feedback Text  -->
                        <div class="client-feedback-text text-center">
                            <div class="client">
                                <i class="fa fa-quote-left" aria-hidden="true"></i>
                            </div>
                            <div class="client-description text-center">
                                <p>“ Muchas gracias por todo. Buenisima experiencia. ”</p>
                            </div>
                            <div class="star-icon text-center">
                                <i class="ion-ios-star"></i>
                                <i class="ion-ios-star"></i>
                                <i class="ion-ios-star"></i>
                                <i class="ion-ios-star"></i>
                                <i class="ion-ios-star"></i>
                            </div>
                            <div class="client-name text-center">
                                <h5>Dra. Alice Boyle</h5>
                                <p></p>
                            </div>
                        </div>
                        <!-- Client Feedback Text  -->
                        <div class="client-feedback-text text-center">
                            <div class="client">
                                <i class="fa fa-quote-left" aria-hidden="true"></i>
                            </div>
                            <div class="client-description text-center">
                                <p>“ Agradezco mucho la atención y excelente estadía. ”</p>
                            </div>
                            <div class="star-icon text-center">
                                <i class="ion-ios-star"></i>
                                <i class="ion-ios-star"></i>
                                <i class="ion-ios-star"></i>
                                <i class="ion-ios-star"></i>
                                <i class="ion-ios-star"></i>
                            </div>
                            <div class="client-name text-center">
                                <h5>Carlos Navas</h5>
                                <p></p>
                            </div>
                        </div>
                        <!-- Client Feedback Text  -->
                        <div class="client-feedback-text text-center">
                            <div class="client">
                                <i class="fa fa-quote-left" aria-hidden="true"></i>
                            </div>
                            <div class="client-description text-center">
                                <p>“ Fue una experiencia buenísima visitar aquí y una estadía excelente y comoda ¡Gracias!.”</p>
                            </div>
                            <div class="star-icon text-center">
                                <i class="ion-ios-star"></i>
                                <i class="ion-ios-star"></i>
                                <i class="ion-ios-star"></i>
                                <i class="ion-ios-star"></i>
                                <i class="ion-ios-star"></i>
                            </div>
                            <div class="client-name text-center">
                                <h5>Liam Reucle</h5>
                                <p></p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Client Thumbnail Area -->
                <div class="col-12 col-md-6 col-lg-5">
                    <div class="slider slider-nav">
                        <div class="client-thumbnail">
                            <img src="img/icons/icon-user.png" alt="">
                        </div>
                        <div class="client-thumbnail">
                            <img src="img/icons/icon-user.png" alt="">
                        </div>
                        <div class="client-thumbnail">
                            <img src="img/icons/icon-user.png" alt="">
                        </div>
                        <div class="client-thumbnail">
                            <img src="img/icons/icon-user.png" alt="">
                        </div>                        
                    </div>
                </div>
            </div>
        </div>
</section>

Для лучшего понимания моей ситуации и того, чего я пытаюсь достичь, я добавил визуализацию следующим образом (я не могу вставлять изображения, у меня нет 10 пунктов репутации)

Динамическое поведение: https://i.imgur.com/ktQ0Lsl.png

Статическое поведение: https://i.imgur.com/CF7JKKD.png

Извините за любую информацию, которую я мог пропустить Любая помощь или комментарии будут оценены

Ответы [ 2 ]

0 голосов
/ 27 мая 2019

Поскольку вы установили slidesToShow:3 и у вас есть только три отзыва, скользкий слайдер добавляет слайдер, когда у вас более 3 отзывов.если вы установите slidesToShow=2, то вы увидите слайдер с точками и стрелками и двумя отзывами одновременно.

Надеюсь, вы получите ответ.

0 голосов
/ 17 мая 2019

Здравствуйте, я только что видел ссылки, которые вы дали, и мой вывод: -

  1. Я думаю, что ваше динамическое представление является правильным.
  2. Добавьте более 3 данных в динамические отзывы, и вы будетесм. то же поведение.
  3. также отправьте данные $testimonial для получения дополнительной информации.
...