SLIDER_Tek sayfada çoklu slider(one page multiple slider)
<blockquote> <p><br /> <script src="~/eraydogancomtemplate/js/jquery.min.js"></script><br /> <link href="~/eraydogancomtemplate/bootstrap.min.css" rel="stylesheet" /><br /> <script src="~/eraydogancomtemplate/bootstrap/js/bootstrap.min.js"></script></p> <p>@model IEnumerable<eraydogancomtr.Class.EkCozumlerModel></p> <p><!------ Include the above in your HEAD tag ----------><br /> <style></p> <p> /*SLIDER SECTION CSS*/</p> <p> * {<br /> box-sizing: border-box;<br /> }</p> <p> body {<br /> margin: auto;<br /> font-family: calibri;<br /> }</p> <p> #slider .container-fluid {<br /> padding: 0 15px;<br /> }</p> <p> #slider .slider-inner {<br /> padding: 0;<br /> }</p> <p> .slider-inner .item img {<br /> display: block;<br /> width: 100%;<br /> height: auto;<br /> }</p> <p> .slider-inner h1 {<br /> color: purple;<br /> }</p> <p><br /> </style><br /> <link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" rel="stylesheet" type="text/css" /><br /> <link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet" type="text/css" /><br /> <section id="slider" class='portfolio-section section'><br /> <br /> <div class="container-fluid"></p> <p> @foreach (var item in Model)<br /> {<br /> <div class="slider-inner col-md-4"><br /> <h6>@item.EkCozumlersql.Aciklama</h6><br /> <div id="owl-demo" class="owl-carousel owl-theme" style="margin-top: 20px;"><br /> @foreach (var resim in item.EkCozumlerResimler)<br /> {</p> <p> <div class="item"><br /> <img src="~/fileman/images/@resim.Resim" alt="sliderimg1"><br /> <p>@resim.Aciklama</p><br /> </div><br /> }<br /> <br /> </div><br /> </div><br /> }</p> <p><br /> </p> <p> @*<div class="slider-inner col-md-4"><br /> <h1>SECOND</h1><br /> <div id="owl-demo" class="owl-carousel owl-theme" style="margin-top: 20px;"><br /> <div class="item"><br /> <img src="http://www.waypoint.com/wp-content/uploads/2016/06/WRG-Hero-images-1366x400-WhyWaypoint.png" alt="sliderimg1"><br /> </div><br /> <div class="item"><br /> <img src="http://www.waypoint.com/wp-content/uploads/2016/07/WRG-Hero-images-1366x400-News.png" alt="sliderimg2"><br /> </div><br /> <div class="item"><br /> <img src="http://www.waypoint.com/wp-content/uploads/2016/10/WRG-Hero-images-1366x400-eBook-Customer-Service.png" alt="sliderimg3"><br /> </div><br /> <div class="item"><br /> <img src="https://www.linkfinancial.eu/wp-content/uploads/2016/07/LF-Spain-Web-Images-Building-3-hires-1366x400.jpg" alt="sliderimg3"><br /> </div><br /> </div><br /> </div></p> <p> <div class="slider-inner col-md-4"><br /> <h1>Third</h1><br /> <div id="owl-demo" class="owl-carousel owl-theme" style="margin-top: 20px;"><br /> <div class="item"><br /> <img src="http://www.waypoint.com/wp-content/uploads/2016/12/WRG-ReputationSafeguardginHero-images-1366x400.jpg" alt="sliderimg1"><br /> </div><br /> <div class="item"><br /> <img src="http://www.waypoint.com/wp-content/uploads/2016/07/WRG-Hero-images-1366x400-Home.png" alt="sliderimg2"><br /> </div><br /> <div class="item"><br /> <img src="http://www.waypoint.com/wp-content/uploads/2016/07/WRG-Hero-images-1366x400-Industry.png" alt="sliderimg3"><br /> </div><br /> <div class="item"><br /> <img src="http://www.waypoint.com/wp-content/uploads/2016/06/WRG-Hero-images-1366x400-Solutions.png" alt="sliderimg3"><br /> </div><br /> </div><br /> </div><br /> <div class="slider-inner col-md-4"><br /> <h1>FOURTH</h1><br /> <div id="owl-demo" class="owl-carousel owl-theme" style="margin-top: 20px;"><br /> <div class="item"><br /> <img src="http://www.waypoint.com/wp-content/uploads/2016/06/WRG-Hero-images-1366x400-WhyWaypoint.png" alt="sliderimg1"><br /> </div><br /> <div class="item"><br /> <img src="http://www.waypoint.com/wp-content/uploads/2016/07/WRG-Hero-images-1366x400-News.png" alt="sliderimg2"><br /> </div><br /> <div class="item"><br /> <img src="http://www.waypoint.com/wp-content/uploads/2016/10/WRG-Hero-images-1366x400-eBook-Customer-Service.png" alt="sliderimg3"><br /> </div><br /> <div class="item"><br /> <img src="https://www.linkfinancial.eu/wp-content/uploads/2016/07/LF-Spain-Web-Images-Building-3-hires-1366x400.jpg" alt="sliderimg3"><br /> </div><br /> </div><br /> </div>*@<br /> </div><br /> </section></p> <p><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script><br /> <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js" type="text/javascript"></script></p> <p><script><br /> $(function () {<br /> var count = 0;<br /> $('.owl-carousel').each(function () {<br /> $(this).attr('id', 'owl-demo' + count);<br /> $('#owl-demo' + count).owlCarousel({<br /> navigation: true,<br /> <br /> pagination: true,<br /> singleItem: true,<br /> <br /> autoHeight: true<br /> });<br /> count++;<br /> });<br /> });<br /> </script></p> </blockquote>
.JPG)
