Dynamic Image Slider Lösung

<!DOCTYPE html> 
<html> 
<head> 
    <title>Slider</title> 
    <!-- required css --> 
    <link rel="stylesheet" type="text/css" href="http://localhost/blog/public/css/jquery.bxslider.css"> 
    <style type="text/css"> 
     .sliderContainer { 
      width: 320px; 
      margin: 0 auto; 
     } 
    </style> 
</head> 
<body> 

<div style="float:right;"> 
    <table style="border:3px solid #00008B;background-color:#90EE90;"> 
     <h2>1st Advertisement</h2> 
     <tr> 
      <td> 
       <a id="adv" href="http://www.w3.org"><img name="noslide" id="noslide" alt="my images" height="240" 
                  width="320" 
                  src="http://2.bp.blogspot.com/-M5lNkr0H3Bk/VJfppu-wPxI/AAAAAAAARhs/FSZY0iVdCF4/s1600/Hand%2BPainting%2Bhd%2Bimagess%2B(3).jpg"/></a> 
      </td> 
     </tr> 
     <tr> 
      <td align="center" style="font:small-caps bold 15px georgia; color:blue;"> 
       <div id="fixeddiv">1st Advertisement</div> 
      </td> 
     </tr> 

    </table> 
    {{$count=count($slides)}} 

    <table style="border:3px solid #00008B;background-color:#90EE90;"> 
     <h2>2nd Advertisement</h2> 
     <div class="sliderContainer"> 
      <ul class="bxslider"> 
       @foreach($slides as $key=>$val) 
         <li><a>{{$val->id}}</a><a href="{{$val->link}}"><img src="http://localhost/blog/public/images/{{$val->image_name}}"/></a></li> 

       @endforeach 
      </ul> 
     </div> 
    </table> 
</div> 


<!-- required js --> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.bxslider').bxSlider({ 
      // see documentation for more options 
      'auto': true 
     }); 
    }); 
</script> 
</body> 
</html> 

public function index() 
    { 
     $slides = DB::table('sliders')->get(); 
     return view('home')->with('slides',$slides); 
    }

Es gibt vier Bilder in meiner Datenbank gespeichert. Dies zeigt die Bilder in einem Schieberegler, aber ich möchte es dynamisch machen. Ich werde sagen, dass Bild 1 4 mal und Bild 2 2 mal zufällig und nicht seriell angezeigt wird. Wie kann ich es tun?Dynamic Image Slider Lösung

Quelle

2017-03-21 Zubayer Jamil

Nehmen wir an, Ihre HTML wie folgt aussieht:

<ul id="container"> 
    <li class="slide">Slide 1</li> 
    <li class="slide">Slide 2</li> 
    <li class="slide">Slide 3</li> 
</ul>

Dann könnten Sie versuchen, die folgenden:

$('.bxslider').bxSlider({ 
     'auto': true, 
     onSlideBefore: function($slideElement, oldIndex, newIndex) { 
      // updated newIndex here with your logic 

     } 
    });

Quelle

2017-03-21 07:51:25

Dynamic Image Slider Lösung

Antwort

Verwandte Themen