carousel.blade.php 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <style>
  2. .carousel-box .carousel-control-prev,.carousel-box .carousel-control-next{
  3. border: 0px;
  4. }
  5. .carousel-control-next, .carousel-control-prev{
  6. display: flex;
  7. -ms-flex-align: center;
  8. align-items: center;
  9. -ms-flex-pack: center;
  10. justify-content: center;
  11. width: 15%;
  12. padding: 0;
  13. color: #fff;
  14. text-align: center;
  15. background: 0 0;
  16. border: 0;
  17. opacity: .5;
  18. transition: opacity .15s ease;
  19. }
  20. .carousel-box .d-md-block p{
  21. color: #dddddd;
  22. }
  23. </style>
  24. <div class="carousel-box">
  25. <div class="carousel slide" data-ride="carousel" style="width: 100%">
  26. <ol class="carousel-indicators">
  27. @foreach($items as $key => $item)
  28. <li data-target="#carouselExampleIndicators" data-slide-to="{{$key}}" class="{{$key == 0 ? 'active':''}}"></li>
  29. @endforeach
  30. </ol>
  31. <div class="carousel-inner">
  32. @foreach($items as $key => $item)
  33. <div class="carousel-item {{$key == 0 ? 'active':''}}">
  34. <a href="{{$item['link']}}">
  35. <img src="{{$item['img_src']}}" class="d-block w-100" alt="...">
  36. <div class="carousel-caption d-none d-md-block">
  37. <h5>{{$item['title']}}</h5>
  38. <p>{{$item['content']}}</p>
  39. </div>
  40. </a>
  41. </div>
  42. @endforeach
  43. </div>
  44. <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
  45. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  46. <span class="sr-only">Previous</span>
  47. </button>
  48. <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
  49. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  50. <span class="sr-only">Next</span>
  51. </button>
  52. </div>
  53. </div>