在移动响应中将内容 Div 更改为 Carousel

Question

我在桌面视口中有一些产品图片作为列表。

<div>
    <img src="abc.png" />
</div>
<div>
    <img src="def.png" />
</div>
<div>
    <img src="xyz.png" />
</div>

当视口调整为移动设备大小时，内容图像应更改为图像轮播。

我不想放置 hidden-xs 并将相同的内容添加到另一个 div 中，以便我可以显示移动设备的轮播。

有什么办法吗？

提前致谢。

Answer 1

我在这个演示中使用owlcarousel。

我建议在jsbin（或整页选项）中查看完整演示以查看完整操作。

function init() {
  // detect if it mobile screen
  var mql = window.matchMedia("screen and (max-width: 768px)");
  if (mql.matches) {
    // do the carousel's magic
    initCarousel();
  }
  else {
    // destroy the carousel
    destroyCarousel();
  }
}

var carousel = false;
function initCarousel() {
  // check if carousel was initialized already
  if (!carousel) {
    $('.owl-carousel').owlCarousel({
      loop:true,
      responsive: false
    }); 
  
    carousel = true;
  }
}

function destroyCarousel() {
  if (carousel) {
   $('.owl-carousel').trigger('destroy.owl.carousel').removeClass('owl-loaded');
   $('.owl-carousel').find('.owl-stage-outer').children().unwrap();
  }
  carousel = false;
}

// Do this on both of the window's events load and resize to cover the all cases.
$(window).bind('resize load', init);

@media screen and (min-width: 769px) {
  .owl-carousel {
    display:block !important;
  }
}

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
<link href="http://owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet" />
<link href="http://owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet" />

<div class="owl-carousel">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>