猫头鹰旋转木马 - 只有一个导航的两个猫头鹰旋转木马

时间:2018-06-14 01:10:31

标签: css owl-carousel

是否有可能仅使用一个导航制作owl-carousel?他们俩都会回应?

我有这段代码:

 <div class="col">

第一个Owl-Carousel

   <div class="owl-carousel owl-theme show-nav-title" data-plugin-options="{'items': 4, 'margin': 10, 'loop': false, 'nav': true, 'dots': false}">
     <div>
       <a href="#">
         <span class="thumb-info thumb-info-centered-info">
           <span class="thumb-info-wrapper">
             <img src="img/projects/project-5.jpg" class="img-fluid" alt="">
               <span class="thumb-info-title">
                 <span class="thumb-info-inner">Project Title</span>
                 <span class="thumb-info-type">Project Type</span>
               </span>
               <span class="thumb-info-action">
                 <span class="thumb-info-action-icon">
                   <i class="fas fa-link"></i>
                 </span>
               </span>
           </span>
         </span>
       </a>
     </div>
     <div>
       <a href="#">
         <span class="thumb-info thumb-info-centered-info">
           <span class="thumb-info-wrapper">
             <img src="img/projects/project-5.jpg" class="img-fluid" alt="">
               <span class="thumb-info-title">
                 <span class="thumb-info-inner">Project Title</span>
                 <span class="thumb-info-type">Project Type</span>
               </span>
               <span class="thumb-info-action">
                 <span class="thumb-info-action-icon">
                   <i class="fas fa-link"></i>
                 </span>
               </span>
           </span>
         </span>
       </a>
     </div>
     <div>
       <a href="#">
         <span class="thumb-info thumb-info-centered-info">
           <span class="thumb-info-wrapper">
             <img src="img/projects/project-5.jpg" class="img-fluid" alt="">
               <span class="thumb-info-title">
                 <span class="thumb-info-inner">Project Title</span>
                 <span class="thumb-info-type">Project Type</span>
               </span>
               <span class="thumb-info-action">
                 <span class="thumb-info-action-icon">
                   <i class="fas fa-link"></i>
                 </span>
               </span>
           </span>
         </span>
       </a>
     </div>
     <div>
       <a href="#">
         <span class="thumb-info thumb-info-centered-info">
           <span class="thumb-info-wrapper">
             <img src="img/projects/project-5.jpg" class="img-fluid" alt="">
               <span class="thumb-info-title">
                 <span class="thumb-info-inner">Project Title</span>
                 <span class="thumb-info-type">Project Type</span>
               </span>
               <span class="thumb-info-action">
                 <span class="thumb-info-action-icon">
                   <i class="fas fa-link"></i>
                 </span>
               </span>
           </span>
         </span>
       </a>
     </div>
     <div>
       <a href="#">
         <span class="thumb-info thumb-info-centered-info">
           <span class="thumb-info-wrapper">
             <img src="img/projects/project-5.jpg" class="img-fluid" alt="">
               <span class="thumb-info-title">
                 <span class="thumb-info-inner">Project Title</span>
                 <span class="thumb-info-type">Project Type</span>
               </span>
               <span class="thumb-info-action">
                 <span class="thumb-info-action-icon">
                   <i class="fas fa-link"></i>
                 </span>
               </span>
           </span>
         </span>
       </a>
     </div>
   </div>

第二个Owl-Carousel

   <div class="owl-carousel owl-theme show-nav-title" data-plugin-options="{'items': 4, 'margin': 10, 'loop': false, 'nav': false, 'dots': false}">
     <div>
       <a href="#">
         <span class="thumb-info thumb-info-centered-info">
           <span class="thumb-info-wrapper">
             <img src="img/projects/project-5.jpg" class="img-fluid" alt="">
               <span class="thumb-info-title">
                 <span class="thumb-info-inner">Project Title</span>
                 <span class="thumb-info-type">Project Type</span>
               </span>
               <span class="thumb-info-action">
                 <span class="thumb-info-action-icon">
                   <i class="fas fa-link"></i>
                 </span>
               </span>
           </span>
         </span>
       </a>
     </div>
     <div>
       <a href="#">
         <span class="thumb-info thumb-info-centered-info">
           <span class="thumb-info-wrapper">
             <img src="img/projects/project-5.jpg" class="img-fluid" alt="">
               <span class="thumb-info-title">
                 <span class="thumb-info-inner">Project Title</span>
                 <span class="thumb-info-type">Project Type</span>
               </span>
               <span class="thumb-info-action">
                 <span class="thumb-info-action-icon">
                   <i class="fas fa-link"></i>
                 </span>
               </span>
           </span>
         </span>
       </a>
     </div>
     <div>
       <a href="#">
         <span class="thumb-info thumb-info-centered-info">
           <span class="thumb-info-wrapper">
             <img src="img/projects/project-5.jpg" class="img-fluid" alt="">
               <span class="thumb-info-title">
                 <span class="thumb-info-inner">Project Title</span>
                 <span class="thumb-info-type">Project Type</span>
               </span>
               <span class="thumb-info-action">
                 <span class="thumb-info-action-icon">
                   <i class="fas fa-link"></i>
                 </span>
               </span>
           </span>
         </span>
       </a>
     </div>
     <div>
       <a href="#">
         <span class="thumb-info thumb-info-centered-info">
           <span class="thumb-info-wrapper">
             <img src="img/projects/project-5.jpg" class="img-fluid" alt="">
               <span class="thumb-info-title">
                 <span class="thumb-info-inner">Project Title</span>
                 <span class="thumb-info-type">Project Type</span>
               </span>
               <span class="thumb-info-action">
                 <span class="thumb-info-action-icon">
                   <i class="fas fa-link"></i>
                 </span>
               </span>
           </span>
         </span>
       </a>
     </div>
     <div>
       <a href="#">
         <span class="thumb-info thumb-info-centered-info">
           <span class="thumb-info-wrapper">
             <img src="img/projects/project-5.jpg" class="img-fluid" alt="">
               <span class="thumb-info-title">
                 <span class="thumb-info-inner">Project Title</span>
                 <span class="thumb-info-type">Project Type</span>
               </span>
               <span class="thumb-info-action">
                 <span class="thumb-info-action-icon">
                   <i class="fas fa-link"></i>
                 </span>
               </span>
           </span>
         </span>
       </a>
     </div>
   </div>
 </div>

在第二个Owl-Carousel我返回false nav隐藏导航按钮是否有可能为两个owl-carousel进行一次导航?

或者,如果您有其他carousel plugins,我很乐意尝试。

0 个答案:

没有答案