example31.php HOME Examples overview Download Ask a question / privacy policy / imprint
example32.php

jQuery responsive image slider with touch swipe and optional bullet navigation. Confugured with copy & paste JavaScript code editor.

Loading, please wait...

About

The main JavaScript code for image slider was generated with the AJAX-ZOOM slider editor. Additionally, the parent container of the player is sized with the AJAX-ZOOM jQuery.fn.axZmEmbedResponsive plugin. This plugin lets you define any proportion you need, similar to bootstrap embed-responsive css class, but the height will not exceed the height of the screen or any percentage of the screen height set in the jQuery.fn.axZmEmbedResponsive plugin option named "heightLimit" (see code below).

JavaScript & CSS files in Head


<!-- AJAX-ZOOM main js and css file -->
<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>
<link rel="stylesheet" type="text/css" href="../axZm/axZm.css" />

<!-- AJAX-ZOOM imageSlider extension -->
<link rel="stylesheet" type="text/css" href="../axZm/extensions/jquery.axZm.imageSlider.css" />
<script type="text/javascript" src="../axZm/extensions/jquery.axZm.imageSlider.js"></script>

<style type="text/css">
    /* copy of bootstraps embed-responsive and embed-responsive-item CSS classes
        if bootstrap or simmilar is included you could use the native classes (without az_) */
    .az_embed-responsive {
        box-sizing: border-box;
        position: relative;
        display: block;
        height: 0;
        padding: 0;
        overflow: hidden;
    }

    .az_embed-responsive-item {
        box-sizing: border-box;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

    /* Style of the bullet container located outside of the player */
    #azBulletOutside {
        background-color: #F2D3A2;
        padding-top: 5px;
        padding-bottom: 5px;
        min-height: 30px;
    }

    /* Hard set some styling*/
    #axZm_zoomContainer {
        background-color: #000;
    }
</style>
    

HTML markup


<!-- Responsive wrapper which uses embed-responsive Bootstrap CSS class -->
<div id="ajaxZoomContainerParent" class="az_embed-responsive">
    <!-- Div where AJAX-ZOOM is loaded into -->
    <div id="azParentContainer" class="az_embed-responsive-item">
        Loading, please wait...
    </div>
</div>

<!-- Container for the bullet navigation located outside of the player -->
<div id="azBulletOutside"></div>
    

Javascript

This code was setup by the editor mentioned above.

Load other examples in slider