标签: swiper

我有一个Swiper滑块和一个像"1/10"的计数器位置.我想用动画改变当前的幻灯片编号(1).我知道如何替换这个数字,但是这个动画就像另一个故事:

正如你在gif上看到的那样,如果我在我的滑块上适度点击它会很好地工作,但是当我双重三重或疯狂地点击下一个链接时,完全打破了计数器,因为在这个gif示例中做了克隆.
你知道我怎么能以更好的方式做到这一点？

我做了一个jsfiddle,只为第一次改变工作:
- http://jsfiddle.net/asb39sff/1/

// Init
var $c_cur = $("#count_cur"),
    $c_next = $("#count_next");

TweenLite.set($c_next, {y: 12, opacity: 0}, "count");


// Change counter function
function photos_change(swiper) {
    var index = swiper.activeIndex +1,
        $current = $(".photo-slide").eq(index),
        dur = 0.8,
        tl = new TimelineLite();

    // Just a test
    tl.to($c_cur, dur, {y: -12, opacity: 0}, "count")
      .to($c_next, dur, {y: 0, opacity: 1}, "count")

    //$c_cur.text(index);
    //$c_next.text(index + 1);
}

我正在使用Ionic2 ion-slides,它对我来说很好.

    <ion-slides [options]="extraOptions">
        <ion-slide *ngFor="let slide of slides">
            <img src="{{slide.image}}" />
        </ion-slide>
    </ion-slides>

我想补充一个水平滚动条如下所示的组队,探索API中http://idangero.us/swiper/api/#.V6Lcx8twbqA(例13)作为文档提到组队,探索什么是用于ion-slides.在该示例的源代码具有 <div class="swiper-scrollbar"></div>的后<div class="swiper-wrapper">标签.

问题是Ionic会生成HTML,所以如何添加滚动条功能.

要向滑块添加分页项目符号,我只需pager在ion-slides标记中添加属性指令.是否有类似的horizental滚动条？

我正在使用swiper滑块，并希望在滑块之外具有导航箭头。我基本上想做的和在airbnb网站上看起来一样，其中带有图像的滑块占据了整整12列的行，但是箭头不在其中。我正在使用bootstrap twitter css框架，并且尝试了各种方法，但是没有任何效果，并且不知道如何实现此目标？

CSS是这样的：

.swiper-container {
  margin-top: 50px;
  position: relative;
}

.arrow-left {
  position: absolute;
  top: 50%;
  left: 0;
}

.arrow-right {
  position: absolute;
  top: 50%;
  right: 0;
}

HTML看起来像这样：

       <div class="row swiper-container">
          <div class="arrow-left">
            <i class="ion-chevron-left"></i>
          </div>
          <div class="col-md-12 swiper-wrapper">
            @foreach($videos as $video)
              <div class="swiper-slide video-card">
                <header class="card__thumb">
                  <a href="/player/{{ $player->id }}/video/{{ $video->id }}"><img src="{{ $video->getThumbnail() }}"/></a>
                </header>

                <div class="card__body">
                  <div class="card__category">

                  </div>
                  <small>
                    {{ $video->created_at->diffForHumans() }}
                  </small>
                  <span class="video-title">
                    <p>
                      @if($video->title != '')
                        {{ …

我试图将Swiper插件添加到我的一个页面.我想要实现的是整合将carousal滑块放在这里http://idangero.us/swiper/demos/05-slides-per-view.html

HTML

 <div class="swiper-container">
    <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
    </div>

    <div class="swiper-pagination"></div>
    </div>

JS

var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 3,
        paginationClickable: true,
        spaceBetween: 30,
        // Navigation arrows
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    });

当我把它添加到小提琴它工作,但当我添加到我的HTML页面,swiper无法工作,直到我打开firebug或调整页面大小(http://vidznet.com/ng1/swiper/swipe.html)我不确定如果初始化时发生冲突,因为控制台中没有错误.

花了一些时间后,我认为它可能是一个jquery问题,并将编码包装在一个

pagebeforecreate

 $(document).on( "pagebeforecreate", "#new_",function( event ) { 

但仍然是一样的,

我还添加了以下代码

swiper.updateContainerSize(); …

我正在使用带有拇指的Swiper 3.4.2滑块作为分页滑块。我需要禁用分页滑块上的拖动，但要启用单击事件，以便可以通过单击分页滑块中的拇指来更改主滑块。

    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 0,
        slidesPerView: 'auto',
        shortSwipes: false,
        slideToClickedSlide: true,
        preventClicksPropagation: false,
        preventClicks: false
    });

通过设置simulateTouch为false，我也失去了点击触摸事件。

我有一个使用react-native-swiper模块的本机组件。swiper 中的一张幻灯片包含在组件状态中设置的文本。在组件中，我还有一个带有表单的模态，当用户尝试从模态保存输入数据时，它会更改状态的文本。

问题是：在我当前的实现中，每次我保存新数据时，swiper 都会被拖到最后一张幻灯片，并重新渲染幻灯片（这个过程很滞后）。所以我想知道更顺畅地更新幻灯片的最佳方法是什么？

下面是我的组件：

'use strict';

import React from 'react';
import { 
  Dimensions, 
  StyleSheet, 
  View, 
  Text, 
  ScrollView,
  AlertIOS,
  AsyncStorage
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import Swiper from 'react-native-swiper';
import Button from 'react-native-button';
import { saveName, getName } from '../Utils/dataService';
import { showAlert } from '../Utils/alert';
import HeaderSection from './HeaderSection';
import { styles } from '../Styles/Styles';
import { renderPagination } from './renderPagination';

class MainView extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: …

第一次使用 swiper，我按照文档并在我的代码中添加了 html 部分，然后在 JS 中初始化它，我初始化了分页但它没有显示在我的页面上。这是我的代码：

JS：

var Swiper = require('swiper');
   $(document).ready(() => {
      var swiper = new Swiper('.swiper-container', {
        pagination: {
          el: '.swiper-pagination',
        }
      });
    });

HTML：

 <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
    </div>
    <div class="swiper-pagination"></div>
   </div>

有人可以解释一下我做错了什么我得到了分页元素的高度和宽度（以 px 为单位）？

嗨，我正在我正在做的网站上使用 iDangero Swiper，但由于某种原因，我无法让响应式断点工作。下面是我正在使用的js。

var swiper = new Swiper('.s1', {
 slidesPerView: 5,
 slidesPerColumn: 2,
 spaceBetween: 30,
 nextButton: '.swiper-button-next',
 prevButton: '.swiper-button-prev',
 breakpoints: {
  1024: {
   slidesPerView: 5,
   spaceBetween: 30
  },
  768: {
   slidesPerView: 1,
   spaceBetween: 10
  },
  640: {
   slidesPerView: 1,
   spaceBetween: 10
 },
 320: {
  slidesPerView: 1,
  spaceBetween: 10
 }
},
});

我出错的任何想法

var mySwiper = new Swiper('.myswiper', {
        autoplay: 3000,
        simulateTouch: true,
        loop: true,
        preloadImages: true,
        speed: 200,
        pagination: '.swiper-pagination'
    });

虽然这是我的初始 swiper，当我用鼠标拖动它或用手指触摸它然后滑动它时，我的 swiper 停止自动播放，如何修复它？

我正在 HTML/JS/CSS 中进行原型设计，尝试构建以下内容：

不幸的是，我在 CSS 部分苦苦挣扎。您可以在下面找到一个功能齐全的最小实现，但包含 4 个问题：

1. 从幻灯片 1 --> 幻灯片 19 滚动时，我只能滚动到幻灯片 19 的一半。怎么会？我想完整地查看幻灯片 19。

2. 我上传了一个 512x512 的图像，在内存中生成了一个 285x285 的图像。怎么来的？

3. 我不能够使用“显示：内联”，使双方的div：<div class="swiper-slide0">First Color</div>和<div class="swiper-container">在同一行（最终结果的可视化CFR）。怎么来的？

4. 'Swiper' JS 库允许设置 'slidesPerView'（例如等于 5），但一旦应用，无论屏幕尺寸如何，它都会保持不变。

   • 我想根据设备的 screenWidth/screenHeight 设置一个 blockWidth/blockHeight，它总是在可读性/可用性范围内应用（例如，当屏幕为 1127px 宽时，应显示最大数量的块，例如 5 , 6, 7 或者可能只有 4)。因此，我想动态设置 blockWidth/blockHeight 而不是必须输入 slidesPerView，这会导致在调整屏幕大小以遵循 slidesPerView = 5 时会更改 blockWidth/blockHeight。

   • 当前解决方案：我更改了“宽度：100%；” 在 '.swiper-container' 到“width: 285px;”。然后 JS 会自动将元素的宽度分配为 55px。然后我使用这个结果来手动设置其他元素的大小。预期结果：原生 JavaScript/CSS 中的自动化替代方案

<!doctype html>
<html>
<head>

  <title>Prototyping</title>

  <!-- Link Swiper's CSS -->

  <!-- Override/Add -->
  <style id="color_thief-js"> …