Question

我使用光滑滑块显示5个信息块。我已经在大屏幕上构建它，滑块实际上没有滑动。相反，它只显示像浮动div一样的块。我想在少于768个选择的移动设备上做的事情是显示一些块，并让用户滑动以查看所有选择的内容。在我遇到麻烦的地方就是在移动设备上，我写了slideToScroll为1，相反它似乎忽略了我写过的断点：

- (void) convertPhotosToStrings
{
    NSManagedObjectContext *managedObjectContext = MOC();

    NSFetchRequest *fr = [NSFetchRequest fetchRequestWithEntityName:@"Photos"];

    fr.predicate = [NSPredicate predicateWithFormat:@"relatedRecord = %@", self.recordChosen];
    fr.sortDescriptors = @[[NSSortDescriptor sortDescriptorWithKey:@"idPhoto"
                                                     ascending:YES]];

    self.frc = [[NSFetchedResultsController alloc] initWithFetchRequest:fr managedObjectContext:managedObjectContext sectionNameKeyPath:nil cacheName:nil];
    self.frc.delegate = self;

    NSError *error = nil;
    [self.frc performFetch:&error];
    if (error) NSLog (@"%@",error);

    for (long int currentItem = 0; (currentItem <= [[self.frc fetchedObjects] count]-1);currentItem++)
    {
        [self convertCurrentPhotoToStringFromCurrentItem : currentItem];
    }
}

- (void) convertCurrentPhotoToStringFromCurrentItem : (long int) currentItem
{
    NSLog(@"currentItem = %li", currentItem);
    sleep (1);  //Allows to chech the memory used by each photo
    NSIndexPath *indexPath = [NSIndexPath indexPathForItem:currentItem inSection:0];
    Photos *currentPhoto = [self.frc objectAtIndexPath:indexPath];
    NSString *stringPhoto = [UIImageJPEGRepresentation([UIImage imageWithData:currentPhoto.photoThumbnail],1.0) base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength];
    // some process
}

这是我的HTML：

    $(".xb-reg").slick({
 dots: false,
 infinite: false,
 slidesToScroll: 2,
 variableWidth: true,
 autoplay: false,
 autoplaySpeed: 2000,
      responsive: [
           {
                breakpoint: 768,
                settings: {
                     slidesToScroll: 1
                }
           }
      ]
});

Answer 1

Just Remove Variable width True 

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Pratice</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>
</head>

<body>
    <div class="slider-container">
        <div class="xb-reg slider">
            <div class="tkr">
                Info Block 1
            </div>
            <div class="tkr">
                Info Block 2
            </div>
            <div class="tkr">
                Info Block 3
            </div>
            <div class="tkr">
                Info Block 4
            </div>
            <div class="tkr">
                Info Block 5
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(".xb-reg").slick({
            dots: false,
            slidesToScroll: 2,
            slidesToShow: 3,
            autoplay: false,
            autoplaySpeed: 2000,
            responsive: [{
                breakpoint: 768,
                settings: {
                    slidesToScroll: 1,
                    slidesToShow: 1,
                }
            }]
        });

    </script>
</body>

</html>

Answer 2

感谢Manish，我能够对代码和我的css做一些调整，以达到我需要的解决方案。

$(".xb-reg").slick({
     dots: false,
     infinite: false,
     arrows: false,
     variableWidth: true,
     slidesToShow: 3,
     autoplay: false,
     autoplaySpeed: 2000,
          responsive: [
               {
               breakpoint: 9999,
               settings: "unslick"
               },
               {
                    breakpoint: 768,
                    settings: {
                         slidesToShow: 2,
                    }
               }
          ]
});

Slick Slider slidesToScroll

2 个答案: