Setting Events

Setting event filtering in Homepage 1 and Events page

This events filter is using isotope plugins to filtered the event items. This is the filter navigation code in html file:

<ul class="event_filter">
    <li><a class="is_active" href="#!" data-filter="*">All</a></li>
    <li><a href="#!" data-filter=".special">Special</a></li>
    <li><a href="#!" data-filter=".charity">Charity</a></li>
    <li><a href="#!" data-filter=".mountainbike">Mountain Bike</a></li>
</ul>

Base on those code, the filter is divided into some data-filter. Those data-filter will be the class of each event item.

This is the example code for event with data-filter/class .special:

<div class="col-lg-4 align-self-center mb-30 event_outer col-md-6 special">
    <div class="events_item">
        <div class="event_top">
            <div class="top_icon">
                <a href="/single-event.html">
                    <i class="event_go_icon fas fa-plus"></i>
                    <img src="img/events/event1.jpg" alt="images">
                </a>
                <p class="event_location"><span>Seattle</span> <i class="fas fa-map-marked-alt"></i></p>
            </div>
            <!--top_icon-->
        </div>
        <!--event_top-->

        <div class="bottom_text">
            <p>Special Event</p>
            <h3>The Ultimate Tour</h3>
        </div>
        <!--bottom_text-->
    </div>
    <!-- /.events_item -->
</div>
<!-- col-lg-4 -->

So when you press the Special filter the plugin will only show the event with special class.

You can see the better explanation in the plugin site here

Event slide settings

You can change the setting for event slide in homepage 2 setting in script.js file. Here is the code

/* event slider script on Home 2 */
const event_slide = new Swiper(".event_slide", {
    speed: 1000,
    loop: true,
    slidesPerView: 1,
    spaceBetween: 30,
    simulateTouch: false,
    preventInteractionOnTransition: true,
    autoplay: {
        delay: 8000,
        disableOnInteraction: false
    },
    effect: 'coverflow',
    coverflowEffect: {
        rotate: 30,
        slideShadows: false,
    },
    breakpoints: {
        640: {
            slidesPerView: 2,
        },
        1279: {
            slidesPerView: 3,
        },
    },
    // If we need pagination
    navigation: {
        nextEl: '.mt_events .next_swiper',
        prevEl: '.mt_events .prev_swiper',
    },
});

For the event slide in homepage 3 this is the code

/* event slider script in home 3 */
    const event_slidebox = new Swiper(".eventslide_box", {
        speed: 400,
        loop: true,
        slidesPerView: 1,
        spaceBetween: 30,
        autoplay: {
            delay: 6000,
            disableOnInteraction: false
        },
        breakpoints: {
            1024: {
                slidesPerView: 3,
            },
            780: {
                slidesPerView: 2,
            },
            1279: {
                slidesPerView: 4,
            },
        }
    });

For the event slide in homepage 5 this is the code

/* event slider script in home 5 */
const event_slide_five = new Swiper(".event_slide_five", {
    speed: 400,
    loop: true,
    slidesPerView: 1,
    spaceBetween: 0,
    autoplay: {
        delay: 8000,
        disableOnInteraction: false
    },
    breakpoints: {
        1024: {
            slidesPerView: 3,
        },
        780: {
            slidesPerView: 2,
        },
        1279: {
            slidesPerView: 4,
        },
    }
});

These event slide are using the swiper plugin. You can play with the effect slidesPerView and any value for this slide.

You can visit this plugin site for more info about setting the slide the way you wanted.