Skip to content

Instantly share code, notes, and snippets.

@Zakarialabib

Zakarialabib/Carousel.blade.php

Last active December 3, 2022 20:51
Show Gist options
  • Save Zakarialabib/b52fd6c0c96a0ca1475668c933a3456d to your computer and use it in GitHub Desktop.
Save Zakarialabib/b52fd6c0c96a0ca1475668c933a3456d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Zakarialabib revised this gist Dec 3, 2022. 1 changed file with 5 additions and 29 deletions.
    34 changes: 5 additions & 29 deletions Usage.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,48 +1,24 @@










    # USAGE






    ` <x-carousel :image="$image" />`



    ## **Use cdn**


    ` <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>`
    ` <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />`







    ## Register in Aop.Js globallyRegister in Aop.Js globally

    // Import modules
    import Swiper from 'swiper'
    `import Swiper from 'swiper'`

    // Import alpine
    import Alpine from 'alpinejs'
    window.Alpine = Alpine
    `import Alpine from 'alpinejs'
    window.Alpine = Alpine`

    // Register module in alpines store
    Alpine.store('Swiper', Swiper)
    `Alpine.store('Swiper', Swiper)`

    // Start alpine
    Alpine.start()
    `Alpine.start()`

  2. Zakarialabib revised this gist Dec 3, 2022. 1 changed file with 31 additions and 7 deletions.
    38 changes: 31 additions & 7 deletions Usage.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,13 +1,37 @@
    ##USAGE

    '' <x-carousel :image="$image" />''

    ##Use cdn

    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

    ##Register in Aop.Js globally







    # USAGE






    ` <x-carousel :image="$image" />`



    ## **Use cdn**


    ` <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>`
    ` <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />`







    ## Register in Aop.Js globallyRegister in Aop.Js globally

    // Import modules
    import Swiper from 'swiper'
  3. Zakarialabib revised this gist Dec 3, 2022. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions Usage.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,13 +1,13 @@
    USAGE
    ##USAGE

    <x-carousel :image="$image" />
    '' <x-carousel :image="$image" />''

    Use cdn
    ##Use cdn

    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

    Register in Aop.Js globally
    ##Register in Aop.Js globally

    // Import modules
    import Swiper from 'swiper'
  4. Zakarialabib created this gist Dec 3, 2022.
    49 changes: 49 additions & 0 deletions Carousel.blade.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,49 @@
    <div x-data="mySliderComponent">
    <div class="swiper-container">
    <div class="swiper-wrapper">
    <div class="swiper-slide">
    <img src="{{ asset('images/products/'.$image) }}" alt="product image" class="w-full h-full object-cover">
    </div>
    </div>
    // enable paginatiion \\
    {{--
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    --}}
    </div>
    </div>

    <script>
    document.addEventListener('alpine:init', () => {
    Alpine.data('mySliderComponent', () => ({
    slider: null,
    init() {
    if(this.$refs.slider) {
    this.slider = new this.$store.Swiper(this.$refs.slider, {})
    }
    ////// swiper config //////
    // slidesPerView: 1,
    // spaceBetween: 30,
    // loop: true,
    // navigation: {
    // nextEl: '.swiper-button-next',
    // prevEl: '.swiper-button-prev',
    // },
    // breakpoints: {
    // 640: {
    // slidesPerView: 2,
    // spaceBetween: 20,
    // },
    // 768: {
    // slidesPerView: 3,
    // spaceBetween: 40,
    // },
    // 1024: {
    // slidesPerView: 4,
    // spaceBetween: 50,
    // },
    // }
    }
    })
    })
    </script>
    24 changes: 24 additions & 0 deletions Usage.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    USAGE

    <x-carousel :image="$image" />

    Use cdn

    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

    Register in Aop.Js globally

    // Import modules
    import Swiper from 'swiper'

    // Import alpine
    import Alpine from 'alpinejs'
    window.Alpine = Alpine

    // Register module in alpines store
    Alpine.store('Swiper', Swiper)

    // Start alpine
    Alpine.start()