内容Div将被改为传送带在移动响应

我有一些产品图像作为桌面视口中的列表。内容Div将被改为传送带在移动响应

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

当将视口大小调整为移动大小时，内容图像应更改为图像旋转木马。

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

有没有办法做到这一点？

在此先感谢。

来源

2015-11-04 Chandni Jirawla

如果传送带需要的JavaScript，你需要“听”到'resize'事件，当它火初始化旋转木马插件。 –

如果未在移动设备中调整大小并进行查看，该怎么办？那么它应该是旋转木马。 –

我在本演示中使用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>

来源

2015-11-04 13:07:45

内容Div将被改为传送带在移动响应

回答

相关问题