Zurück zur Startseite

demo

Code Snippets:

Component: Modal

Open Modal with Contact Form 7

Open Modal with Gravity Forms

Code Snippet 

							
<div class="js-modal-open" data-modal="modal-demo">Open Modal</div>
<div class="modal" id="modal-demo">
	<div class="modal__overlay"></div>
	<div class="modal__inner">
		<div class="modal__content">
			<div class="modal__close js-modal-close">
				<svg><use xlink:href="#close"></use></svg>
			</div>
			<div class="modal__content-inner">
				content here
			</div>
		</div>
	</div>
</div>

Component: Toggle

Toggle Collapsed Element

Collapsed content here

Code Snippet 

							
<a href="#" class="js-toggle" data-item="toggle-demo">Toggle Collapsed Element</a>
<div class="js-toggle-content" id="toggle-demo">
    Collapsed content here
</div>

Component: Accordion

Accordion Title 1
Accordion Content 1
Accordion Title 2
Accordion Content 2

Code Snippet 

							
<div class="js-accordion">
    <div class="js-accordion-item">
        <div class="h5 js-accordion-title"><span>Accordion Title 1</span>
            <svg width="16" height="16"><use xlink:href="#angle-down"></use></svg>
        </div>
        <div class="js-accordion-content"><p>Accordion Content 1</p></div>
    </div>
    <div class="js-accordion-item">
        <div class="h5 js-accordion-title"><span>Accordion Title 2</span>
            <svg width="16" height="16"><use xlink:href="#angle-down"></use></svg>
        </div>
        <div class="js-accordion-content"><p>Accordion Content 2</p></div>
    </div>
</div>

Component: Tabs

• Horizontal Tabs
Tab Title 1
Tab Title 2
Tab Content 1
Tab Content 2

Code Snippet 

							
<div class="js-tabs tabs tabs--horizontal">
    <div class="tabs__titles">
        <div class="js-tab-title is-active" data-item="tab-1">Tab Title 1</div>
        <div class="js-tab-title" data-item="tab-2">Tab Title 2</div>
    </div>
    <div class="tabs__contents">
        <div class="js-tab-content is-active" id="tab-1"><strong>Tab Content 1</strong></div>
        <div class="js-tab-content" id="tab-2"><strong>Tab Content 2</strong></div>
    </div>
</div>
• Vertical Tabs
Tab Title 1
Tab Title 2
Tab Content 1
Tab Content 2

Code Snippet 

							
<div class="js-tabs tabs tabs--vertical">
    <div class="tabs__titles">
        <div class="js-tab-title is-active" data-item="tab-1">Tab Title 1</div>
        <div class="js-tab-title" data-item="tab-2">Tab Title 2</div>
    </div>
    <div class="tabs__contents">
        <div class="js-tab-content is-active" id="tab-1"><strong>Tab Content 1</strong></div>
        <div class="js-tab-content" id="tab-2"><strong>Tab Content 2</strong></div>
    </div>
</div>

Slider Swiper.js

Check Swiper Demos here.
Check Swiper API here.


Code Snippet 

							
<div class="swiper swiper-images">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="" alt="">
        </div>
        <div class="swiper-slide">
            <img src="" alt="">
        </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"><svg><use xlink:href="#angle-left"></use></svg></div>
	<div class="swiper-button-next"><svg><use xlink:href="#angle-right"></use></svg></div>
</div>

<script>
    demoSlider = document.querySelectorAll('.swiper-demo');
    if (demoSlider) {
        demoSlider.forEach(slider => {
            const swiper = new Swiper(slider, {
                loop: true,
                autoplay: {
                    delay: 2500,
                    disableOnInteraction: false,
                },
                pagination: {
                    el: slider.parentNode.querySelector('.swiper-pagination'),
                    clickable: true,
                },
                navigation: {
                    nextEl: slider.parentNode.querySelector('.swiper-button-next'),
                    prevEl: slider.parentNode.querySelector('.swiper-button-prev'),
                },
                on: {
                    // lazy load images
                    slideChange: function () {
                        try {
                            lazyLoadInstance.update();
                        } catch (e) {
                        }
                    }
                }
            });
        });
    }
</script>

Fancybox

Code Snippet 

							
<!-- Video lightbox-->
<a data-fancybox="gallery" data-src="https://youtu.be/nqye02H_H6I">
    <img src="https://lipsum.app/id/3/200x150" />
</a>

<!-- Image lightbox-->
<a data-fancybox="gallery" data-src="https://lipsum.app/id/4/1024x768">
    <img src="https://lipsum.app/id/4/200x150" />
</a>

Nice Select 2