标签: carousel

我正在使用 Nick Lockwood 旋转木马，类型为轮式旋转木马。我将图像用作轮播中的项目。问题是，当我旋转轮播时，图像也会旋转，即考虑一个人图像，然后人图像会倾斜，这是我不想要的，即我不想在旋转整个轮播时旋转该特定图像。有人可以帮忙吗？

我正在使用 slick 来创建轮播，目前，点表示要显示的图像位于图像下方。我希望它显示在图像内部，就像它覆盖图像一样。

这是我的代码

<div class="carousel">
    <div><img src="path1"></div>
    <div><img src="path2"></div>
    <div><img src="path3"></div>
</div>

这是我的CSS

.slick-dots{
position: absolute;
bottom: -25px;

display: block;

width: 100%;
padding: 0;
margin: 0;

list-style: none;

text-align: center;
}

这是我的js

<script type="text/javascript">
    $(document).ready(function(){
      $('.carousel').slick({
          dots: true,
          infinite: true,
          speed: 500,
          fade: true,
          cssEase: 'ease',
          autoplay: true,
          arrows: false,
          lazyLoad: 'ondemand',
          cssEase: 'linear',
        });
    }); 
</script>

这是我用来做轮播的链接。

我一直在谷歌上寻找在单个页面上使用多个轮播的方法，但没有找到任何适合我的解决方案。你们中的任何人都可以帮忙吗？

这是代码：

超文本标记语言

<!-- Carousel 1 -->
<div id="demo">
    <div class="container">
        <div class="row">
            <div class="span12">
                <div id="owl-demo" class="owl-carousel">
                    <div class="item">
                        <h1>1</h1>
                    </div>
                    <div class="item">
                        <h1>2</h1>
                    </div>
                    <div class="item">
                        <h1>3</h1>
                    </div>
                    <div class="item">
                        <h1>4</h1>
                    </div>
                    <div class="item">
                        <h1>5</h1>
                    </div>
                    <div class="item">
                        <h1>6</h1>
                    </div>
                    <div class="item">
                        <h1>7</h1>
                    </div>
                    <div class="item">
                        <h1>8</h1>
                    </div>
                    <div class="item">
                        <h1>9</h1>
                    </div>
                    <div class="item">
                        <h1>10</h1>
                    </div>
                </div>
                <div class="customNavigation"> <a class="btn prev">Previous</a> <a class="btn next">Next</a> </div>
            </div>
        </div>
    </div>
</div>
<!-- Carousel 2 -->
<div id="demo1">
    <div class="container"> …

所以，我正在尝试复制apple.com风格的轮播。我想要计时器分页，到目前为止我已经完成了这么多：jsfiddle

如何用进度条替换分页按钮？这是我到目前为止所拥有的：

$(document).ready(function() {
  var time = 2;
  var $bar,
    $slick,
    isPause,
    tick,
    percentTime;

  $slick = $('.slider');
  $slick.slick({
    draggable: true,
    adaptiveHeight: false,
    dots: true,
    mobileFirst: true,
    pauseOnDotsHover: true,
  });

  $bar = $('.slider-progress .progress');

  $('.slider-wrapper').on({
    mouseenter: function() {
      isPause = true;
    },
    mouseleave: function() {
      isPause = false;
    }
  })

  function startProgressbar() {
    resetProgressbar();
    percentTime = 0;
    isPause = false;
    tick = setInterval(interval, 10);
  }

  function interval() {
    if (isPause === false) {
      percentTime += 1 / (time …

这是我第一次使用 Bootstrap Carousel，我完全按照文档所述操作，我将所有四张幻灯片显示在彼此之上。有什么提示吗？

            <div id="madinah-carousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#madinah-carousel" data-slide-to="0" class="active"></li>
                <li data-target="#madinah-carousel" data-slide-to="1"></li>
                <li data-target="#madinah-carousel" data-slide-to="2"></li>
                <li data-target="#madinah-carousel" data-slide-to="3"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                    <img src="img/mad/1.jpeg" alt="Madinah first screenshot">
                </div>
                <div class="carousel-item">
                    <img src="img/mad/2.jpeg" alt="Madinah second screenshot">
                </div>
                <div class="carousel-item">
                    <img src="img/mad/3.jpeg" alt="Madinah third screenshot">
                </div>
                <div class="carousel-item">
                    <img src="img/mad/4.jpeg" alt="Madinah fourth screenshot">
                </div>
            </div>
            <!-- Controls -->
            <a class="left carousel-control" href="#madinah-carousel" role="button" data-slide="prev">
                <span class="icon-prev" …

我正在使用光滑的滑块。

有谁知道如何向“slick-active”滑块添加一个类？

我正在展示 3 张幻灯片，我希望每张幻灯片都有不同的类：左侧幻灯片一个类，中间一个类，右侧幻灯片另一个类。

例如，对于活动的左幻灯片：“slick-active-left”。

我正在使用 React owl carousel来显示动态轮播。

当我放置static html it displays the data properly in carousel但当我尝试显示dynamic data（使用 axios）然后carousel is always blank.

注意:: 我使用 axios 获取数据并更新我用来循环数据的状态。

有人可以解释我在这里犯了什么错误，因为轮播总是空白。

所有代码都在同一个文件中：

我的代码::

import React, { Component } from 'react';
import HeaderComponent from '../Common/Header';
import SidebarComponent from '../Common/Sidebar';
import TrendingStoriesComponent from './TrendingStories';
import FlashDealsComponent from './FlashDeals';
import WeeklyPicksComponent from './WeeklyPicks';
import OwlCarousel from 'react-owl-carousel';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';

import axios from 'axios';
import moment from 'moment';

class HomeComponent extends Component …

我正在学习颤振中的轮播。我想为轮播图像提供全屏宽度。但是宽度是由轮播本身自动获取的。有什么办法可以让图像在轮播内具有全屏宽度？在这里，我同时使用了 carousel_pro 和 carousel_slider，两者都按我的预期工作。请帮忙。

  List _images = [
    Image.network(
        "https://stimg.cardekho.com/images/carexteriorimages/630x420/Lamborghini/Lamborghini-Huracan-EVO/6731/1546932239757/front-left-side-47.jpg?tr=w-456,e-sharpen"),
    Image.network(
        "https://auto.ndtvimg.com/car-images/big/lamborghini/aventador/lamborghini-aventador.jpg?v=5"),
    Image.network(
        "https://www.lamborghini.com/sites/it-en/files/DAM/lamborghini/gateway-family/few-off/sian/car_sian.png"),
    Image.network(
        "https://www.topgear.com/sites/default/files/styles/16x9_1280w/public/images/news-article/2018/01/38eba6282581b285055465bd651a2a32/2bc8e460427441.5a4cdc300deb9.jpg?itok=emRGRkaa"),
    Image.network(
        "https://blog.dupontregistry.com/wp-content/uploads/2013/05/lamborghini-egoista.jpg"),
  ];

  List _images2 = [
    "https://stimg.cardekho.com/images/carexteriorimages/630x420/Lamborghini/Lamborghini-Huracan-EVO/6731/1546932239757/front-left-side-47.jpg?tr=w-456,e-sharpen",
    "https://auto.ndtvimg.com/car-images/big/lamborghini/aventador/lamborghini-aventador.jpg?v=5",
    "https://www.lamborghini.com/sites/it-en/files/DAM/lamborghini/gateway-family/few-off/sian/car_sian.png",
    "https://www.topgear.com/sites/default/files/styles/16x9_1280w/public/images/news-article/2018/01/38eba6282581b285055465bd651a2a32/2bc8e460427441.5a4cdc300deb9.jpg?itok=emRGRkaa",
    "https://blog.dupontregistry.com/wp-content/uploads/2013/05/lamborghini-egoista.jpg",
  ];



            Carousel(
                images: _images,
                autoplay: true,
                boxFit: BoxFit.fitWidth,
                dotBgColor: Colors.transparent,
                dotSize: 3,
                dotColor: Colors.red,
                dotIncreasedColor: Colors.red,
                autoplayDuration: Duration(seconds: 3),
                animationCurve: Curves.fastOutSlowIn,
              ),
            ),
            SizedBox(height: 20),
            CarouselSlider(
              items: _images2
                  .map(
                    (x) => Container(
                      width: double.infinity,
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          image: NetworkImage(x, scale: 1),
                        ),
                      ),
                    ),
                  )
                  .toList(),
              autoPlay: true,
              height: 200.0,
            ),

我正在使用 carousel_slider 颤动插件。我想减少“项目”小部件之间的空间。这是我的代码：

CarouselSlider(
          options: CarouselOptions(
            enableInfiniteScroll: false,
            initialPage: 0,
            height: screenHeight * 0.35,
            enlargeCenterPage: true,
            viewportFraction: 0.85
          ),
          items: <Widget>[
            Container(
              padding: EdgeInsets.all(0),
              color: Colors.blue,
            ),
            Container(
              padding: EdgeInsets.all(0),
              color: Colors.blue,
            )
          ],
        )

这就是我得到的：

我想在我的 Rails 应用程序中有一个模式/弹出窗口。最后，即使使用幻灯片/旋转木马。我遵循了几个教程，但都不起作用。例如：CrashingChandelier。此外，堆栈溢出的许多问题也无济于事，因为它们中的大多数都处理 js 文件。

本课程说它可以在不使用 Javascript 文件的情况下使用 Bootstrap-modal。虽然应该很简单，但我无法修复它，我不知道如何调试它。所以请帮助我。

这是带有按钮和模态的index.html.erb。

<!-- BUTTON -->
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

<!--MODAL-->

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
            <div class="pull-left"><h4>Your picture gallery</h4></div>
              <button type="button" class="close" data-dismiss="modal" title="Close">
                <span class="glyphicon glyphicon-remove"></span>
              </button>
          </div>
    <div class="modal-body">

      <p>hello, world!</p>

    </div><!--end modal-body-->
        <div class="modal-footer">
        <div class="pull-left">
        </div>
          <button class="btn-sm close" type="button" data-dismiss="modal">Close</button>
      </div><!--end modal-footer-->
    </div><!--end modal-content-->
  </div><!--end modal-dialoge-->
</div><!--end myModal-->

这是我的application.scss

/*
 *
 */

@import "bootstrap-sprockets";
@import "bootstrap"; …