小编Pau*_*ega的帖子

我正在使用 react-slick 滑块，但不知道如何重新初始化滑块。使用 jquery slick 插件，我可以调用 $slick.reInit()，但是使用 react 我似乎无法做到这一点。我可以做类似的事情来对 reinit 方法做出反应吗？

我有一个活跃的网站,在一个页面上有3个光滑的滑块,通常光滑不会初始化,而是我只看到所有的图像,有时如果我刷新他们都开始工作.

https://au.hairandme.com.au/collections/all/products/hair-rejuvenation-treatment

是有问题的页面.

 ( function($) {
$.noConflict();
  $(document).ready(function() { 
  $('.HEROSLIDE').slick({
    autoplay: true,
  autoplaySpeed: 2000,
    pauseOnFocus: false,
  });

  $('.HEROSLIDEMOBILE').slick({
    autoplay: true,
  autoplaySpeed: 2000,
    pauseOnFocus: false,
  });
    $('.benefits-slider').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        arrows: true,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 768,
      settings: {
        arrows: true,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: true,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ] …

让我们假设我有以下数据库模型(不是真实的情况,所以请原谅我这个例子的完全愚蠢):

我想从db中获取连接结果,这样我就可以从Facultyelement 开始构造这些对象的树.

因此我会有以下案例类:

  case class StudentWithGrades(student: Student, grades: Seq[Grade])
  case class GroupWithStudents(group: Group, students: Seq[Student])
  case class FacultyWithGroups(faculty: Faculty, groups: Seq[Group])

并且想要重建从db中检索到的行,以便我最终只需要一个Seq[FacultyWithGroups].

有没有比这更简单的方法:

  db.run (
    FacultyTable
      .join(GroupTable).on(_.id === _.facultyId)
      .join(StudentTable).on(_._2.id === _.groupId)
      .join(GradeTable).on(_._2.id === _.studentId)
      .result
      .map {
        _.groupBy { case (((faculty, group), student), _) =>
          (faculty, group, student)
        }
        .map { case ((faculty, group, student), groupped) =>
          (faculty, group, StudentWithGrades(student, groupped.map(_._2)))
        }
        .toSeq
        .groupBy { case (faculty, group, studentGrades) =>
          (faculty, group)
        }
        .map …

我想知道是否有办法使用自定义光滑滑块点.当我搜索时,我所能找到的就是如何将幻灯片中的点变成缩略图的例子,但这不是我想要完成的.我只想使用自己的png图片进行主动和非主动点导航.我试过这个:

    $('.slick-dots li').html('<a href="#"><img src="slide-dot.png" /></a>');
    $('.slick-dots li.slick-active').html('<a href="#"><img src="slide-dot-active.png" /></a>');

但这不起作用,但我记得我之前做过类似的事情.我在这里错过了什么吗？

谢谢!

我想重播默认的光滑箭头，我有这种代码：

对于我的滑块

<div id="pager-container">    
    <div class="owl-carousel owl-theme margin-top" id="blog-pager">         
        <?php foreach($new_release as $blog_data) { ?>
            <div class="blog-post" style="height: 250px; width: 300px; margin: 5px;" data-date="<?php echo $blog_data['date_identifier']; ?>" data-category="<?php echo $blog_data['category_id']; ?>">
                <a href="<?php echo get_default_link(array('ctr'=>'blogpost', 'id'=> $blog_data['blog_id'])); ?>" title="Link to blog post : <?php echo $value['blog_title']; ?>">
                  <div class="background-image" style="background-image: url('<?php echo UPLOADS_DEFAULT_URL.$blog_data['cover_image']; ?>');">
                  </div>
                  <div class="blog-body">
                    <div class="blog-title">
                      <?php echo $blog_data['blog_title']; ?><br/>
                        <span class="small-text">
                          <?php echo $blog_data['blog_date']; ?>
                        </span>
                    </div>
                  </div>
                </a>
            </div>              
        <?php } ?>          
    </div>

JS部分

$('#blog-pager').slick({ …