仅在移动设备而非桌面上显示滑块答案

【问题标题】：Display sliders only on mobile device not desktop仅在移动设备而非桌面上显示滑块
【发布时间】：2017-04-28 20:11:53
【问题描述】：

如何通过根据设备宽度替换现有 HTML 代码来动态修改 DOM。使用@media 查询隐藏或显示内容，尝试使用 .after 方法修改它的 Jquery 调整大小功能。需要帮助

使用过的代码

function resizefunction(){
 if ($(window).width() < 500)
 {
   var $leftsec = $(".active li:nth-child(4)").html();
   var $rightsec = $(".active li:nth-child(5)").html();
   $( ".active" ).after( "<li>" + $leftsec+ "</li><li>" + $rightsec+ "</li>" );
   $(".active div:nth-child(4)").css("display","none");
   $(".active div:nth-child(5)").css("display","none");
 }
 else
 {
   console.log('Resize > 500');
 }
};

桌面版

<html>
 <body>
 <ul class="parent">
  <li class="active">1st slider
  <ul class="child">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
 </ul>
 </li>
  <li>2st slider
   <ul class="child">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  </li>
 </ul>
 </body>
</html>

手机版

<html>
 <body>
  <ul class="parent">
   <li class="active">1st slider
    <ul class="child">
     <li>1</li>
     <li>2</li>
    </ul>
   </li>
   <li>2st slider
     <ul class="child">
      <li>3</li>
      <li>4</li>
     </ul>
   </li>
  </ul>
 </body>
</html>

【问题讨论】：

你能提供一个工作代码
LINK [ jsfiddle.net/ssuryar/euQ5n/268 ] Demo 打开控制台查看类 {.current} 中 display none 的变化

标签： javascript jquery html css media-queries

【解决方案1】：

您是否偶然想了解函数 $(window).resize()？参考：-https://api.jquery.com/resize/

$(window).resize(function() {
  // This will execute whenever the window is resized
  $(window).width(); // New width
});

以上代码参考：-http://www.sweet-web-design.com/wordpress/detecting-browser-window-size-resize-with-jquery/1614/

【讨论】：

Resize 将根据宽度起作用，如何在滑块上进行迭代？
你是想写dom操作的代码还是写什么时候执行dom操作？
@SuryaRPraveen 这是一个纯 CSS 滑块的链接 - cssslider.com/wordpress-slideshow-32.html 之后您可以创建两个 dom，一个用于移动设备，另一个用于桌面，并以您想要的方式进行操作。 :)
对手机和平板电脑优化的幻灯片演示的 DOM 操作
@SuryaRPraveen 请检查 cmets。我已经发布了您需要的内容。但是，如果您需要优化它，那么我将无法提供帮助，因为我没有任何经验。