API tools faq
paste
apl-mhd

addsview

apl-mhd
Jan 6th, 2019
186
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 33.52 KB | None | 0 0
raw download clone embed print report
  1. @extends('frontend.master')
  2.  
  3. @section('content')
  4.     <main class="main-content-area">
  5.         {{-- Ad search --}}
  6.         <div class="ad-search-area">
  7.             <div class="container">
  8.                 <div class="row">
  9.                     <div class="col-md-12">
  10.                         <div class="ad-search-form">
  11.                             <form action="">
  12.                                 <div class="mega-menu">
  13.                                     <span><i class="fa fa-bars"></i></span>
  14.                                 </div>
  15.                                 <div class="main-search">
  16.                                     <input type="search" class="form-control" placeholder="I am looking for....">
  17.                                 </div>
  18.                                 <div class="location-search">
  19.                                     <span><i class="fa fa-map-marker-alt"></i></span>
  20.                                     <input type="text" class="form-control" placeholder="Location">
  21.                                 </div>
  22.                                 <div class="feat-search">
  23.                                     <input type="text" class="form-control" placeholder="2km">
  24.                                 </div>
  25.                                 <div class="search-button">
  26.                                     <button class="btn-brand"><i class="fa fa-search"></i></button>
  27.                                 </div>
  28.  
  29.                             </form>
  30.                         </div>
  31.                     </div>
  32.                 </div>
  33.                 <div class="row">
  34.                     <div class="col-md-12">
  35.                         <div class="breadcrumbs">
  36.                             <a href="#">Home</a>
  37.                             <span><i class="fa fa-chevron-right"></i></span>
  38.                             <a href="#">Cars</a>
  39.                             <span><i class="fa fa-chevron-right"></i></span>
  40.                             <a href="#">BMW</a>
  41.                             <span><i class="fa fa-chevron-right"></i></span>
  42.                             <a href="#">200 cc</a>
  43.                         </div>
  44.                     </div>
  45.                 </div>
  46.                 <div class="row">
  47.                     <div class="col-md-8">
  48.                         <div class="ad-details-wrapper">
  49.                             <div class="ad-details">
  50.                                 <div class="ad-header-area">
  51.                                     <div class="ad-header-top d-flex justify-content-between align-items-center">
  52.                                         <h3 class="ad-header-top-title"><a href="#">{{$add->title}} </a></h3>
  53.                                         <div class="ad-header-top-price">
  54.                                             <img src="{{ asset('/assets/img/icons/taka-sign.png') }}" width="14" height="16" alt="">
  55.                                             <span>{{$add->price}}</span>
  56.                                         </div>
  57.                                     </div>
  58.                                     <div class="ad-header-bottom d-flex justify-content-between">
  59.                                         <p class="ad-location-text"><i class="fa fa-map-marker-alt color-primary"></i> Adabor, Dhaka</p>
  60.                                         <p class="ad-view"><i class="fa fa-eye color-primary"></i></p>
  61.                                         <p class="ad-fav"><i class="fa fa-heart color-primary"></i></p>
  62.                                     </div>
  63.                                 </div>
  64.  
  65.                                 <div class="ad-images">
  66.  
  67.                                     <ul class="nav nav-tabs ad-nav-area" role="tablist">
  68.                                         <li class="nav-item">
  69.                                             <a class="nav-link" href="#adPhoto" role="tab" data-toggle="tab">
  70.                                                 <i class="fa fa-image color-primary"></i>
  71.                                                 <span>Photo</span>
  72.                                             </a>
  73.                                         </li>
  74.                                         <li class="nav-item">
  75.                                             <a class="nav-link" href="#adMap" role="tab" data-toggle="tab">
  76.                                                 <i class="fa fa-map-marker-alt color-primary"></i>
  77.                                                 <span>Map</span>
  78.                                             </a>
  79.                                         </li>
  80.                                     </ul>
  81.  
  82.                                     <div class="tab-content ad-nav-content-area">
  83.                                         <div role="tabpanel" class="tab-pane fade in active show" id="adPhoto">
  84.  
  85.                                             @foreach (json_decode($add->images) as $img)
  86.                                                 <div class="mySlides">
  87.                                                     <img src="{{url('images/'.$img)}}" style="width:100%">
  88.                                                 </div>
  89.                                             @endforeach
  90.  
  91.  
  92.  
  93.                                             <a class="ad-prev" onclick="plusSlides(-1)">❮</a>
  94.                                             <a class="ad-next" onclick="plusSlides(1)">❯</a>
  95.  
  96.                                             <div class="caption-container">
  97.                                                 <p id="caption"></p>
  98.                                             </div>
  99.  
  100.                                             <div class="img-nav-area">
  101.                                                 <div class="img-nav-item">
  102.                                                     <img class="imgNav cursor"
  103.                                                         src="{{ asset('/assets/img/car-1.png') }}" style="width:100%"
  104.                                                         onclick="currentSlide(1)" alt="Car 1">
  105.                                                 </div>
  106.                                                 <div class="img-nav-item">
  107.                                                     <img class="imgNav cursor"
  108.                                                         src="{{ asset('/assets/img/LamborghiniRoadsterTA.jpg') }}"
  109.                                                         style="width:100%"
  110.                                                         onclick="currentSlide(2)" alt="Car 2">
  111.                                                 </div>
  112.                                                 <div class="img-nav-item">
  113.                                                     <img class="imgNav cursor"
  114.                                                         src="{{ asset('/assets/img/car-1.png') }}" style="width:100%"
  115.                                                         onclick="currentSlide(3)" alt="Car 3">
  116.                                                 </div>
  117.                                                 <div class="img-nav-item">
  118.                                                     <img class="imgNav cursor"
  119.                                                         src="{{ asset('/assets/img/LamborghiniRoadsterTA.jpg') }}"
  120.                                                         style="width:100%"
  121.                                                         onclick="currentSlide(4)" alt="Car 4">
  122.                                                 </div>
  123.                                                 <div class="img-nav-item">
  124.                                                     <img class="imgNav cursor"
  125.                                                         src="{{ asset('/assets/img/car-1.png') }}" style="width:100%"
  126.                                                         onclick="currentSlide(5)" alt="Car 5">
  127.                                                 </div>
  128.                                                 <div class="img-nav-item">
  129.                                                     <img class="imgNav cursor"
  130.                                                         src="{{ asset('/assets/img/LamborghiniRoadsterTA.jpg') }}"
  131.                                                         style="width:100%"
  132.                                                         onclick="currentSlide(6)" alt="Car 6">
  133.                                                 </div>
  134.                                             </div>
  135.                                         </div>
  136.  
  137.                                         <div role="tabpanel" class="tab-pane fade" id="adMap">
  138.                                             <h1>Google Map</h1>
  139.                                         </div>
  140.                                     </div>
  141.  
  142.                                 </div>
  143.                             </div>
  144.                         </div>
  145.  
  146.  
  147.                         <div class="ad-description">
  148.                             <div class="row">
  149.                                 <div class="col-md-6">
  150.                                     <div class="description">
  151.                                         <h4>Description</h4>
  152.                                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur dolorum
  153.                                             eius excepturi laboriosam perferendis. At distinctio ipsa laboriosam
  154.                                             recusandae veritatis. Amet autem consectetur corporis dolore ducimus earum
  155.                                             eligendi et fuga id in iusto, laborum laudantium libero mollitia nihil porro
  156.                                             quam quo rem reprehenderit rerum ut voluptas voluptates! Assumenda quis,
  157.                                             tenetur? Ad aperiam debitis dolor expedita id molestias unde? Cupiditate
  158.                                             quasi sed sint veritatis. Asperiores assumenda atque excepturi harum quis
  159.                                             vel. Dolorem quidem sit tempora ullam veritatis. A aperiam cumque
  160.                                             cupiditate, eaque eius esse ex id incidunt iste mollitia nihil possimus.
  161.                                             Dolorem quidem sit tempora ullam veritatis. A aperiam cumque
  162.                                             cupiditate, eaque eius esse ex id incidunt iste mollitia nihil possimus
  163.                                             repudiandae voluptatum. Accusamus cupiditate eum iusto minima nulla, saepe
  164.                                             totam. cupiditate, eaque eius esse ex id. incidunt iste mollitia nihil
  165.                                             possimus
  166.                                             repudiandae voluptatum. Accusamus cupiditate eum iusto minima null.</p>
  167.                                     </div>
  168.                                 </div>
  169.                                 <div class="col-md-6">
  170.                                     <div class="additional-info">
  171.                                         <h4>Additional Info</h4>
  172.  
  173.                                         <div class="row">
  174.                                             <div class="col-md-6">
  175.                                                 <div class="info-box">
  176.                                                     <p>Brand Name:</p>
  177.                                                     <p>Toyota</p>
  178.                                                 </div>
  179.                                                 <div class="info-box">
  180.                                                     <p>Model Year:</p>
  181.                                                     <p>2010</p>
  182.                                                 </div>
  183.                                                 <div class="info-box">
  184.                                                     <p>Condition:</p>
  185.                                                     <p>Used</p>
  186.                                                 </div>
  187.                                                 <div class="info-box">
  188.                                                     <p>Millage:</p>
  189.                                                     <p>20000</p>
  190.                                                 </div>
  191.                                                 <div class="info-box">
  192.                                                     <p>Engine Type:</p>
  193.                                                     <p>2,000c</p>
  194.                                                 </div>
  195.                                                 <div class="info-box">
  196.                                                     <p>Fuel Type:</p>
  197.                                                     <p>Octen</p>
  198.                                                 </div>
  199.  
  200.                                                 <div class="info-box">
  201.                                                     <p>Seller Rating:</p>
  202.                                                     <p>
  203.                                                         <i class="fa fa-star"></i>
  204.                                                         <i class="fa fa-star"></i>
  205.                                                         <i class="fa fa-star"></i>
  206.                                                         <i class="fa fa-star"></i>
  207.                                                         <i class="fa fa-star"></i>
  208.                                                     </p>
  209.                                                 </div>
  210.                                             </div>
  211.                                             <div class="col-md-6">
  212.                                                 <div class="info-box">
  213.                                                     <p>Model Name:</p>
  214.                                                     <p>Primeo</p>
  215.                                                 </div>
  216.                                                 <div class="info-box">
  217.                                                     <p>Reg Year:</p>
  218.                                                     <p>2012</p>
  219.                                                 </div>
  220.                                                 <div class="info-box">
  221.                                                     <p>Transmission:</p>
  222.                                                     <p>Automatic</p>
  223.                                                 </div>
  224.                                                 <div class="info-box">
  225.                                                     <p>Body Type:</p>
  226.                                                     <p>Hatchvack</p>
  227.                                                 </div>
  228.                                                 <div class="info-box">
  229.                                                     <p>Color:</p>
  230.                                                     <p>Red</p>
  231.                                                 </div>
  232.                                                 <div class="info-box">
  233.                                                     <p>Seller Type:</p>
  234.                                                     <p>Private</p>
  235.                                                 </div>
  236.                                                 <div class="info-box">
  237.                                                     <p>Last Edited:</p>
  238.                                                     <p>30/12/2018</p>
  239.                                                 </div>
  240.                                                 <div class="info-box">
  241.                                                     <p>Award</p>
  242.                                                     <p class="award-color">Prime</p>
  243.                                                 </div>
  244.                                             </div>
  245.                                         </div>
  246.                                     </div>
  247.                                 </div>
  248.                             </div>
  249.                         </div>
  250.                     </div>
  251.  
  252.                     <div class="col-md-4">
  253.                         <div class="company-info-area-wrapper">
  254.                             <div class="company-info-area">
  255.                                 <div class="company-info-img">
  256.                                     <img src="https://via.placeholder.com/120" alt="Company info">
  257.                                 </div>
  258.                                 <div class="company-info-content">
  259.                                     <p class="company-title">Company Info</p>
  260.                                     <p class="posting-date">Posting Ad since 2011</p>
  261.                                 </div>
  262.                             </div>
  263.  
  264.                             <div class="contact-company p-3 d-flex justify-content-between">
  265.                                 <div class="contact-info">
  266.                                     <p class="m-0"><span class="font-weight-bold">Contact:</span> company</p>
  267.                                     <p class="m-0 contact-number"><i class="fa fa-phone-square color-primary"></i> 0123456789</p>
  268.                                 </div>
  269.                                 <div class="show-hide-number align-self-end">
  270.                                     <p class="m-0"><button class="numberShow">Click to show number</button></p>
  271.                                 </div>
  272.                             </div>
  273.  
  274.                             <div class="contact-buttons p-3">
  275.                                 <div class="d-flex justify-content-between">
  276.                                     <button class="btn-brand-outline d-flex">
  277.                                         <i class="fa fa-envelope color-primary"></i>
  278.                                         <span>E-mail</span>
  279.                                     </button>
  280.  
  281.                                     <button class="btn-brand-outline d-flex">
  282.                                         <i class="fab fa-facebook-messenger color-primary"></i>
  283.                                         <span>Message</span>
  284.                                     </button>
  285.                                 </div>
  286.                                 <div class="d-flex justify-content-between mt-4">
  287.                                     <button class="btn-brand-outline d-flex">
  288.                                         <i class="fa fa-heart color-primary"></i>
  289.                                         <span>Favourite</span>
  290.                                     </button>
  291.  
  292.                                     <button class="btn-brand-outline d-flex">
  293.                                         <i class="fa fa-exclamation-triangle color-primary"></i>
  294.                                         <span>Warning</span>
  295.                                     </button>
  296.                                 </div>
  297.                             </div>
  298.  
  299.                         </div>
  300.  
  301.                         <section class="staySafeSlider">
  302.                             <div>
  303.                                 <div class="stay-safe-area-wrapper">
  304.                                     <p class="stay-safe-title">Stay Safe 1</p>
  305.                                     <hr>
  306.                                     <img src="{{ asset('/assets/img/icons/safe-icon.png') }}" alt="">
  307.                                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Fuga.</p>
  308.                                     <a href="#">Read all safety tips</a>
  309.                                 </div>
  310.                             </div>
  311.                             <div>
  312.                                 <div class="stay-safe-area-wrapper">
  313.                                     <p class="stay-safe-title">Stay Safe 2</p>
  314.                                     <hr>
  315.                                     <img src="{{ asset('/assets/img/icons/safe-icon.png') }}" alt="">
  316.                                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Fuga.</p>
  317.                                     <a href="#">Read all safety tips</a>
  318.                                 </div>
  319.                             </div>
  320.                             <div>
  321.                                 <div class="stay-safe-area-wrapper">
  322.                                     <p class="stay-safe-title">Stay Safe 3</p>
  323.                                     <hr>
  324.                                     <img src="{{ asset('/assets/img/icons/safe-icon.png') }}" alt="">
  325.                                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Fuga.</p>
  326.                                     <a href="#">Read all safety tips</a>
  327.                                 </div>
  328.                             </div>
  329.                             <div>
  330.                                 <div class="stay-safe-area-wrapper">
  331.                                     <p class="stay-safe-title">Stay Safe 4</p>
  332.                                     <hr>
  333.                                     <img src="{{ asset('/assets/img/icons/safe-icon.png') }}" alt="">
  334.                                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Fuga.</p>
  335.                                     <a href="#">Read all safety tips</a>
  336.                                 </div>
  337.                             </div>
  338.                             <div>
  339.                                 <div class="stay-safe-area-wrapper">
  340.                                     <p class="stay-safe-title">Stay Safe 5/p>
  341.                                     <hr>
  342.                                     <img src="{{ asset('/assets/img/icons/safe-icon.png') }}" alt="">
  343.                                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Fuga.</p>
  344.                                     <a href="#">Read all safety tips</a>
  345.                                 </div>
  346.                             </div>
  347.                         </section>
  348.                         <span class="pagingInfo"></span>
  349.  
  350.                         <div class="share-area-wrapper d-flex justify-content-between">
  351.                             <p>Share</p>
  352.                             <div class="social-share-icon">
  353.                                 <a class="facebook-icon" href="#"><i class="fab fa-facebook-square"></i></a>
  354.                                 <a class="instagram-icon" href="#"><i class="fab fa-instagram"></i></a>
  355.                                 <a class="linkedin-icon" href="#"><i class="fab fa-linkedin"></i></a>
  356.                                 <a class="google-plus-icon" href="#"><i class="fab fa-google-plus"></i></a>
  357.                                 <a class="twitter-icon" href="#"><i class="fab fa-twitter"></i></a>
  358.                                 <a class="pinterest-icon" href="#"><i class="fab fa-pinterest"></i></a>
  359.                                 <a class="gmail-icon" href="#"><img
  360.                                            src="{{ asset('/assets/img/icons/gamil-icon.png') }}" alt=""></a>
  361.                             </div>
  362.                         </div>
  363.  
  364.                     </div>
  365.                 </div>
  366.                 <div class="row">
  367.                     <div class="col-md-12">
  368.                         <div class="you-may-also-like-area">
  369.                             <h4>You may also like...</h4>
  370.                             <hr>
  371.  
  372.                             <div class="you-may-also-link-slider">
  373.  
  374.                                 <div class="also-like-card d-flex">
  375.                                     <div class="also-like-card-img">
  376.                                         <img src="{{ asset('/assets/img/car-1.png') }}" alt="">
  377.                                     </div>
  378.                                     <div class="also-like-card-info ml-3">
  379.                                         <h5>Toyota Premier Auto</h5>
  380.                                         <p><i class="fa fa-map-marker-alt color-primary"></i> Adabor, Dhaka</p>
  381.                                         <p><i class="fa fa-dollar-sign color-primary"></i> 2,00,000</p>
  382.                                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ex hic ipsam
  383.                                             iste iure placeat temporibus veniam voluptates.</p>
  384.                                     </div>
  385.                                 </div>
  386.  
  387.                                 <div class="also-like-card d-flex">
  388.                                     <div class="also-like-card-img">
  389.                                         <img src="{{ asset('/assets/img/car-1.png') }}" alt="">
  390.                                     </div>
  391.                                     <div class="also-like-card-info ml-3">
  392.                                         <h5>Toyota Premier Auto</h5>
  393.                                         <p><i class="fa fa-map-marker-alt color-primary"></i> Adabor, Dhaka</p>
  394.                                         <p><i class="fa fa-dollar-sign color-primary"></i> 2,00,000</p>
  395.                                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ex hic ipsam
  396.                                             iste iure placeat temporibus veniam voluptates.</p>
  397.                                     </div>
  398.                                 </div>
  399.  
  400.                                 <div class="also-like-card d-flex">
  401.                                     <div class="also-like-card-img">
  402.                                         <img src="{{ asset('/assets/img/car-1.png') }}" alt="">
  403.                                     </div>
  404.                                     <div class="also-like-card-info ml-3">
  405.                                         <h5>Toyota Premier Auto</h5>
  406.                                         <p><i class="fa fa-map-marker-alt color-primary"></i> Adabor, Dhaka</p>
  407.                                         <p><i class="fa fa-dollar-sign color-primary"></i> 2,00,000</p>
  408.                                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ex hic ipsam
  409.                                             iste iure placeat temporibus veniam voluptates.</p>
  410.                                     </div>
  411.                                 </div>
  412.  
  413.                                 <div class="also-like-card d-flex">
  414.                                     <div class="also-like-card-img">
  415.                                         <img src="{{ asset('/assets/img/car-1.png') }}" alt="">
  416.                                     </div>
  417.                                     <div class="also-like-card-info ml-3">
  418.                                         <h5>Toyota Premier Auto</h5>
  419.                                         <p><i class="fa fa-map-marker-alt color-primary"></i> Adabor, Dhaka</p>
  420.                                         <p><i class="fa fa-dollar-sign color-primary"></i> 2,00,000</p>
  421.                                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ex hic ipsam
  422.                                             iste iure placeat temporibus veniam voluptates.</p>
  423.                                     </div>
  424.                                 </div>
  425.  
  426.                                 <div class="also-like-card d-flex">
  427.                                     <div class="also-like-card-img">
  428.                                         <img src="{{ asset('/assets/img/car-1.png') }}" alt="">
  429.                                     </div>
  430.                                     <div class="also-like-card-info ml-3">
  431.                                         <h5>Toyota Premier Auto</h5>
  432.                                         <p><i class="fa fa-map-marker-alt color-primary"></i> Adabor, Dhaka</p>
  433.                                         <p><i class="fa fa-dollar-sign color-primary"></i> 2,00,000</p>
  434.                                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ex hic ipsam
  435.                                             iste iure placeat temporibus veniam voluptates.</p>
  436.                                     </div>
  437.                                 </div>
  438.  
  439.                                 <div class="also-like-card d-flex">
  440.                                     <div class="also-like-card-img">
  441.                                         <img src="{{ asset('/assets/img/car-1.png') }}" alt="">
  442.                                     </div>
  443.                                     <div class="also-like-card-info ml-3">
  444.                                         <h5>Toyota Premier Auto</h5>
  445.                                         <p><i class="fa fa-map-marker-alt color-primary"></i> Adabor, Dhaka</p>
  446.                                         <p><i class="fa fa-dollar-sign color-primary"></i> 2,00,000</p>
  447.                                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ex hic ipsam
  448.                                             iste iure placeat temporibus veniam voluptates.</p>
  449.                                     </div>
  450.                                 </div>
  451.  
  452.                                 <div class="also-like-card d-flex">
  453.                                     <div class="also-like-card-img">
  454.                                         <img src="{{ asset('/assets/img/car-1.png') }}" alt="">
  455.                                     </div>
  456.                                     <div class="also-like-card-info ml-3">
  457.                                         <h5>Toyota Premier Auto</h5>
  458.                                         <p><i class="fa fa-map-marker-alt color-primary"></i> Adabor, Dhaka</p>
  459.                                         <p><i class="fa fa-dollar-sign color-primary"></i> 2,00,000</p>
  460.                                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ex hic ipsam
  461.                                             iste iure placeat temporibus veniam voluptates.</p>
  462.                                     </div>
  463.                                 </div>
  464.  
  465.  
  466.                             </div>
  467.                         </div>
  468.  
  469.                     </div>
  470.                 </div>
  471.             </div>
  472.         </div>
  473.  
  474.     </main>
  475. @endsection
  476.  
  477. @section('after_scripts')
  478.     <script>
  479.         // Contact number show
  480.         document.querySelector('.numberShow').addEventListener('click', () => {
  481.             document.querySelector('.contact-number').style.display = 'block';
  482.         });
  483.  
  484.         var slideIndex = 1;
  485.         showSlides(slideIndex);
  486.  
  487.         function plusSlides(n) {
  488.             showSlides(slideIndex += n);
  489.         }
  490.  
  491.         function currentSlide(n) {
  492.             showSlides(slideIndex = n);
  493.         }
  494.  
  495.         function showSlides(n) {
  496.             var i;
  497.             var slides = document.getElementsByClassName("mySlides");
  498.             var dots = document.getElementsByClassName("imgNav");
  499.             var captionText = document.getElementById("caption");
  500.             if (n > slides.length) {
  501.                 slideIndex = 1
  502.             }
  503.             if (n < 1) {
  504.                slideIndex = slides.length
  505.            }
  506.            for (i = 0; i < slides.length; i++) {
  507.                slides[i].style.display = "none";
  508.            }
  509.            for (i = 0; i < dots.length; i++) {
  510.                dots[i].className = dots[i].className.replace(" active", "");
  511.            }
  512.            slides[slideIndex - 1].style.display = "block";
  513.            dots[slideIndex - 1].className += " active";
  514.            captionText.innerHTML = dots[slideIndex - 1].alt;
  515.        }
  516.    </script>
  517.  
  518.     <script>
  519.         // also like carousel
  520.         $('.you-may-also-link-slider').slick({
  521.             dots: true,
  522.             infinite: false,
  523.             speed: 300,
  524.             slidesToShow: 2,
  525.             prevArrow: '<i class="ti-angle-left"></i>',
  526.             nextArrow: '<i class="ti-angle-right"></i>',
  527.             rows: 2,
  528.             slidesToScroll: 2,
  529.             responsive: [
  530.                 {
  531.                     breakpoint: 1024,
  532.                     settings: {
  533.                         slidesToShow: 4,
  534.                         slidesToScroll: 4,
  535.                         infinite: true,
  536.                         dots: true
  537.                     }
  538.                 },
  539.                 {
  540.                     breakpoint: 600,
  541.                     settings: {
  542.                         slidesToShow: 2,
  543.                         slidesToScroll: 2
  544.                     }
  545.                 },
  546.                 {
  547.                     breakpoint: 480,
  548.                     settings: {
  549.                         slidesToShow: 1,
  550.                         slidesToScroll: 1
  551.                     }
  552.                 }
  553.             ]
  554.         });
  555.  
  556.         // Stay safe slider
  557.         $(".staySafeSlider").slick({
  558.             autoplay: false,
  559.             dots: false,
  560.             arrows: true,
  561.             prevArrow: '<i class="ti-angle-left"></i>',
  562.             nextArrow: '<i class="ti-angle-right"></i>',
  563.             customPaging: function (staySafeSlider, i) {
  564.                 var thumb = $(staySafeSlider.$slides[i]).data();
  565.                 return '<a>' + i + '</a>';
  566.             },
  567.             responsive: [{
  568.                 breakpoint: 500,
  569.                 settings: {
  570.                     dots: false,
  571.                     arrows: false,
  572.                     infinite: false,
  573.                     slidesToShow: 2,
  574.                     slidesToScroll: 2
  575.                 }
  576.             }]
  577.         });
  578.  
  579.  
  580.         //custom function showing current slide
  581.         var $status = $('.pagingInfo');
  582.         var $slickElement = $('.staySafeSlider');
  583.  
  584.         $slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
  585.             //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
  586.             var i = (currentSlide ? currentSlide : 0) + 1;
  587.             $status.text(i + '/' + slick.slideCount);
  588.         });
  589.     </script>
  590.  
  591. @endsection
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!