标签: carousel
如何在 slick.js 滑块中仅显示下一张幻灯片的一半
在光滑的滑块中，有一个名为“centerMode”的选项，它基本上确定元素并根据“centerPadding”显示上一个/下一个项目的某些部分。另一个选项是“slidesToShow: 2.3”，它基本上显示 2 个项目和上一个/下一个项目的一半，但我想显示两个完整项目和下一个项目的一半，如下所示：
0
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
如何在asp.net MVC中从数据库制作轮播图像滑块？
假设一个产品有多个图像，现在在产品的详细信息页面中，我想将所有这些图像显示为轮播滑块。现在我如何在 asp.net mvc 中实现它。请帮帮我！！我有这组代码 -
@foreach (var item in ViewBag.Images)
{
for (int i = 0; i < ViewBag.ImgCount;)
{
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="@i"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item">
<img src="~/img/@item.Image" alt="@Model.Name" style="width:100%;">
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
i++;
break;
}
}
这是一张一张地向我展示所有图像......请帮我解决这个......我是MVC的新手......
0
推荐指数
推荐指数
1
解决办法
解决办法
5628
查看次数
查看次数
Laravel 中的动态轮播不起作用仅显示一张图像
我正在尝试在 laravel 中创建一个动态轮播，但我只看到一张图片。我已经寻找了很多小时的解决方案，但我仍然被卡住了
我试图从这个解决方案中更改我的代码Laravel 中的 Dynamic carousel 只显示一张图片但没有用
home.blade.php 代码
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"> </li>
</ol>
<div class="carousel-inner" role="listbox">
@foreach($sliders as $slider)
<div class="carousel-item active">
<img src="{{url('images', $slider->image)}}" class="d-block w-100" alt="...">
</div>
@endforeach
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"> </span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
master.blade.php 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0"> …0
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
如何在 Flutter 中将图像从 API 设置为 Carousel
我想在 Flutter 应用程序中使用横幅滑块，所以我找到了一个库来制作它，即Carousel. 这是一个很好的图书馆，但我发现这个图书馆有问题，How to set image from API into Carousel?或者have any library for support image from API (list), have dot indicator, autoplay like Carousel?
0
推荐指数
推荐指数
1
解决办法
解决办法
2681
查看次数
查看次数
在 Vue.js 中进行 AJAX 调用后重新加载轮播
我的页面中有一个轮播组件，其中的数据通过 AJAX 调用服务器来加载。这部分没问题，但是当旋转木马项目附加到旋转木马时，它就会崩溃。所以我需要在AJAX成功后重新渲染轮播。有人有什么想法吗？我搜索了很多，但找不到 vue.js 的任何内容。
我的代码：
<carousel class="original-carousel" :dots="false" :nav="false">
<router-link class="product-item" to="/product" v-for="product in originalGames">
<div class="image-holder">
<img v-bind:src="product.thumbnail_url" v-bind:alt="product.name">
<div class="product-info">
<div class="product-platform">
origin
<img src="/src/assets/imgs/platform/origin-color.svg" >
</div>
<div class="product-region">
US
</div>
</div>
</div>
<h2 class="product-title">{{product.name}}</h2>
<div class="product-bottom">
<div class="product-card-price">
<div class="original-price__holder" >
<span class="sale-range" v-if="product.sale_percent !== false">%{{product.sale_percent}}</span>
<span class="original-price" v-if="product.sale_percent !== false"> {{product.regular_price}}</span>
</div>
<span class="sale-price">{{product.price}}</span>
</div>
<button class="add-to-cart btn btn--circle btn--transparent">+</button>
</div>
</router-link>
</carousel>
export default {
name: "homePage",
components: {searchBar, topNav, siteFooter, carousel},
data(){
return …0
推荐指数
推荐指数
1
解决办法
解决办法
1876
查看次数
查看次数
Bootstrap 4传送带滑块不起作用
我在通过轮播进入下一张幻灯片时遇到了一些严重的问题。我可能缺少一些非常基本的内容，但是无论我做什么，它似乎都无法正常工作！我也尝试过使用Javascript，但无济于事。
<div id="mycarousel" class="carousel-slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active text-center p-4">
<h1 class="header-h1">WE'RE READY, ARE YOU? </h1>
<H2 class="header-h2">COME AND JOIN US FOR A SHOOT</H2>
<a href="/" class="btn btn-default">FIND OUT MORE</a>
</div>
<div class="carousel-item text-center p-4">
<h1 class="header-h1">COME AND </h1>
<H2 class="header-h2">HAVE</H2>
<a href="/" class="btn btn-default">A GO</a></p>
</div>
</div>
<a class="carousel-control-prev" href="#mycarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#mycarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
-1
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
如何获取引导程序轮播下一个图像的src？
我想知道如何获取引导程序轮播的下一个和上一个图像 src 并将其显示在具有类 previmage 和 nextimage 的 src img 标签中。
谢谢
编辑：
这是我的html：
<div id="slideshow-homepage" class="carousel slide swiper-container" data-ride="carousel" data-interval="5000">
<!-- Slides Container -->
<div class="carousel-inner swiper-wrapper">
<div class="item active swiper-slide">
<a href="#" title="">
<img src="" alt="" class="img-responsive">
</a>
<div class="caption">
<div class="text"></div>
</div>
</div>
<div class="item swiper-slide">
<img src="" alt="" class="img-responsive">
<div class="caption">
<div class="text"></div>
</div>
</div>
<div class="item swiper-slide">
<img src="" alt="" class="img-responsive">
<div class="caption">
<div class="text"> </div>
</div>
</div>
</div>
<nav class="nav-diamond">
<a class="prev leftButton" href="#slideshow-homepage" role="button" …-2
推荐指数
推荐指数
1
解决办法
解决办法
3460
查看次数
查看次数
Bootstrap旋转木马幻灯片图像适合显示在html和CSS中吗？
我正在尝试使轮播图像适合所有类型的显示分辨率。当前，它不适合任何显示分辨率。如何为适合显示的轮播图像幻灯片进行引导
我已经记录了我的屏幕，该屏幕将显示图像不适合显示 https://drive.google.com/file/d/1QsUimIBhuIDYuTwbJtdZgx4CJUeuKwL5/view?usp=sharing
这是我使用的代码
/*
Table Of Content
1. Preloader
2. Smooth Scroll
3. Scroll Naviagation Background Change with Sticky Navigation
4. Mobile Navigation Hide or Collapse on Click
5. Scroll To Top
6. Tooltip
7. Ajaxchimp for Subscribe Form
8. Portfolio Filtering
9. Magnific Popup
10. Testimonial Carousel/Slider
11. Statistics Counter
*/
(function ($) {
'use strict';
jQuery(document).ready(function () {
/* Preloader */
$(window).load(function () {
$('.preloader').delay(800).fadeOut('slow');
});
/* Smooth Scroll */
$('a.smoth-scroll').on("click", function (e) {
var anchor = …-2
推荐指数
推荐指数
1
解决办法
解决办法
687
查看次数
查看次数
标签 统计
carousel ×9
bootstrap-4 ×2
html ×2
javascript ×2
3d ×1
api ×1
asp.net ×1
asp.net-mvc ×1
css ×1
css3 ×1
flutter ×1
jquery ×1
laravel ×1
owl-carousel ×1
php ×1
plugins ×1
slick.js ×1
vue.js ×1