简体   繁体   中英

Add video in royal slider

Below this is my royal slider code. This slider shows images only. I want to add video on this royal slider.I tried and also google but can't fine this type of solution. How can I do it? Thank you.

HTML:

    <div class="slideholder">
       <div class="royalSlider rsDefault">
          <div class="rsContent">
               <img class="rsImg" src="img/1.jpg"  />
          </div>
         <div class="rsContent">
               <img class="rsImg" src="img/2.jpg" />
         </div>
         <div class="rsContent">
               <img class="rsImg" src="img/3.jpg" />
         </div>
       </div>   
   </div>

CSS:

    .royalSlider{
         margin:0 auto;
         max-width:600px;
         width:auto;
    }

JavaScript:

   <script>
       jQuery(document).ready(function($) {
            $(".royalSlider").royalSlider({
                     transitionType:'move',
                     imageScaleMode: 'fill',
         autoScaleSlider:true,
         autoScaleSliderWidth:100+'%',
         autoScaleSliderHeight:'auto',
         autoHeight:true
             });  
        });
  </script>

Try adding the video to the div like the below code

<div class="slideholder">
    <div class="royalSlider rsDefault">
        <div class="rsContent">
            <img class="rsImg" src="img/1.jpg"  />
        </div>
        <div class="rsContent">
            <img class="rsImg" src="img/2.jpg" />
        </div>
        <div class="rsContent">
            <video controls>
                <source src="img/4.mp4" type="video/mp4">
                <source src="img/4.ogg" type="video/ogg">
                Your browser does not support the video tag.
            </video>
        </div>
    </div>   
</div>
        <div id="full-width-slider">

            <div class="rsContent" data="royalSlider">
                <div>
                    <img class="rsImg" src="image.jpg" data-rsVideo="https://vimeo.com/44878206" />
                </div>
            </div>
        </div>


<script>
    // start video autoplay
    jQuery(document).ready(function ($)
    {
        $('#full-width-slider').data('royalSlider').playVideo();
    });
</script>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM