Все о InstantCMS Все о InstantCMS

Слайдер для ваших проектов на Инстант

Слайдер для ваших проектов на Инстант

Код - надо вставить в виджет HTML
  1. <link rel="stylesheet" href="/templates/modern/svit/font/css/font-awesome.min.css" />
  2. <script src="/templates/admincoreui/js/vendors/bootstrap/js/bootstrap.min.js"></script>
  3.  
  4. <script src="/templates/admincoreui/js/vendors/jquery/js/jquery.min.js"></script>
  5. <div class="main">
  6. <div class="container">
  7. <div class="row">
  8. <div class="col-md-12">
  9. <div id="MiCarousel" class="carousel slide" data-ride="carousel">
  10. <ol class="carousel-indicators">
  11. <li data-target="#MiCarousel" data-slide-to="0" class="carousel-pagination active"></li>
  12. <li data-target="#MiCarousel" data-slide-to="1" class="carousel-pagination"></li>
  13. <li data-target="#MiCarousel" data-slide-to="2" class="carousel-pagination"></li>
  14. </ol>
  15. <div class="carousel-inner">
  16. <div class="carousel-item active">
  17. <div class="row">
  18. <div class="col-md-6 div-l">
  19. <div class="carousel-img" style="background-image: url(/templates/modern/svit/images/3.jpg);">
  20. <h1 class="carousel-title">Пример текста 1</h1>
  21. </div>
  22. </div>
  23. <div class="col-md-6 div-r">
  24. <h3>Пример текста 1</h3>
  25. <hr>
  26. <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A tenetur officiis voluptatem vel blanditiis. Nam enim quidem debitis aliquid maxime perferendis repudiandae similique, explicabo, quam minus tenetur cupiditate maiores ea.</p>
  27. <button class="btn btn-primary">Подробнее по ссылке</button>
  28. </div>
  29. </div>
  30. </div>
  31. <div class="carousel-item">
  32. <div class="row">
  33. <div class="col-md-6 div-l">
  34. <div class="carousel-img" style="background-image: url(/templates/modern/svit/images/2.jpg);">
  35. <h1 class="carousel-title">Пример текста 2</h1>
  36. </div>
  37. </div>
  38. <div class="col-md-6 div-r">
  39. <h3>Пример текста 2</h3>
  40. <hr>
  41. <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A tenetur officiis voluptatem vel blanditiis. Nam enim quidem debitis aliquid maxime perferendis repudiandae similique, explicabo, quam minus tenetur cupiditate maiores ea.</p>
  42. <button class="btn btn-primary">Подробнее по ссылке</button>
  43. </div>
  44. </div>
  45. </div>
  46. <div class="carousel-item">
  47. <div class="row">
  48. <div class="col-md-6 div-l">
  49. <div class="carousel-img" style="background-image: url(/templates/modern/svit/images/4.jpg);">
  50. <h1 class="carousel-title">Пример текста 3</h1>
  51. </div>
  52. </div>
  53. <div class="col-md-6 div-r">
  54. <h3>Пример текста 3</h3>
  55. <hr>
  56. <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A tenetur officiis voluptatem vel blanditiis. Nam enim quidem debitis aliquid maxime perferendis repudiandae similique, explicabo, quam minus tenetur cupiditate maiores ea.</p>
  57. <button class="btn btn-primary">Подробнее по ссылке</button>
  58. </div>
  59. </div>
  60. </div>
  61. </div>
  62. <a class="carousel-control-prev carousel-controls" href="#carouselExampleIndicators" role="button" data-slide="prev">
  63. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  64. <span class="sr-only">Previous</span>
  65. </a>
  66. <a class="carousel-control-next carousel-controls" href="#carouselExampleIndicators" role="button" data-slide="next">
  67. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  68. <span class="sr-only">Next</span>
  69. </a>
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. </div>
  75. <style>
  76. body{
  77. font-family: 'Roboto', sans-serif;
  78. }
  79. #MiCarousel{
  80. margin-top: 30px;
  81. margin-bottom: 30px;
  82. -webkit-box-shadow: 10px 10px 38px -13px rgba(0,0,0,0.75);
  83. -moz-box-shadow: 10px 10px 38px -13px rgba(0,0,0,0.75);
  84. box-shadow: 10px 10px 38px -13px rgba(0,0,0,0.75);
  85. }
  86. .carousel-img{
  87. background-color: #000;
  88. color: #fff;
  89. background-position: center;
  90. background-repeat: no-repeat;
  91. background-size: cover;
  92. width: 100%;
  93. height: 100%;
  94. position: absolute;
  95. z-index: 2;
  96. -webkit-clip-path: polygon(0 0, 96% 0, 100% 100%, 0% 100%);
  97. clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
  98. opacity: 0.8;
  99. }
  100.  
  101. .div-r{
  102. padding: 40px;
  103. }
  104.  
  105. .carousel-title{
  106. font-size: 80px;
  107. font-weight: bold;
  108. margin-left: 20px;
  109. margin-top: 20px;
  110. }
  111.  
  112. .carousel-pagination{
  113. background-color: #000 !important;
  114. width: 15px !important;
  115. height: 15px !important;
  116. border-radius: 100%;
  117. position: relative;
  118. bottom: -50px;
  119. opacity: 0.5;
  120. }
  121.  
  122. .carousel-pagination.active{
  123. opacity: 1;
  124. }
  125.  
  126. .carousel-controls{
  127. display: none;
  128. }
  129. </style>
11:29
85
Нет комментариев. Ваш будет первым!
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.