Question

我想将一个列表从水平更改为垂直。

以下是原始列表：

我想将列表更改为：

以下是链接：https://www.loberon.de/Moebel/Schraenke-Regale/Schraenke/Sideboard-Yukon.html，您可以看到。

我想知道，如何使用CSS进行更改。非常感谢：）

P / S：图片应保留。

Answer 1

我认为您需要以响应模式更改js代码：

$(document).ready(function(){
    $('.your-class').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    dots: false,       
    responsive: [
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 3,
          vertical: true,
          verticalSwiping: true,
        }
      },
    ]
  });       
});

这是一个有效的代码：

 $(document).ready(function(){
 	$('.your-class').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    dots: false,       
    responsive: [
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 3,
          vertical: true,
          verticalSwiping: true,
        }
      },
    ]
  });       
});

<link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<div class="your-class">
    <div><img src="https://static.loberon.de/out/pictures/generated/product/2/120_120_75/30552_sideboard_yukon_antikweiss.jpg"></div>
    <div><img src="https://static.loberon.de/out/pictures/generated/product/3/120_120_75/30389_sideboard_yukon_antikweiss.jpg"></div>
    <div><img src="https://static.loberon.de/out/pictures/generated/product/4/120_120_75/30387_sideboard_yukon_antikweiss.jpg"></div>
    <div><img src="https://static.loberon.de/out/pictures/generated/product/5/120_120_75/30388_sideboard_yukon_antikweiss.jpg"></div>
    <div><img src="https://static.loberon.de/out/pictures/generated/product/6/120_120_75/30671_sideboard_yukon_antikweiss.jpg"></div>
  </div>

您还可以选中here。

Answer 2

旋转元素的最简单方法是使用 transform 操作。

#morePicsContainer {
  transform: rotate(90deg);
}

更多信息here

Answer 3

按如下方式更改每个图像样式属性：

class Handler_model extends CI_Model
{
    public function __construct()
    {
        parent :: __construct();
    }


    public function test()
    {
        echo 'TEST'; 
    }
}

Here是指向有关显示类型的文档的链接。希望这可以帮助。

Slick vertical carousel Codepen示例，可能有助于解决此问题。

Answer 4

使用自举网格，以便响应时它可以从水平变为垂直

<div class="col-md-3 col-sm-12">

</div> 
<div class="col-md-3 col-sm-12">

</div> 
<div class="col-md-3 col-sm-12">

</div> 
<div class="col-md-3 col-sm-12">

</div>

Answer 5

这里是工作链接，垂直滑块......

<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

将响应列表从水平CSS更改为垂直CSS

5 个答案: