Customize Your Slider with All Available Settings

A Comprehensive Guide to Understanding and Adjusting Your Slider Module
A Guide to Customizing Your Slider Module

Maximize Your Slider's Potential with Compsoul Slider Settings A Detailed Look at All Available Options for Customizing Your Slider Module

Below I have included a sample instance with all possible settings. You can make them dependent on the width of the screen, so the module will work differently on mobile devices. Each instance of the slider has an individual set of settings, so we can have multiple modules on one page independent of each other and with different options.

    <!-- Treść strony -->
    <script src="compsoul.js"></script>
    <script src="slider.js"></script>
    <script>
      new Slider(".compsoul-slider .compsoul-slide").options({
        classActive: "compsoul-active",
        classFirst: "compsoul-first",
        classNext: "compsoul-next",
        classPrev: "compsoul-prev",
        classPrevious: "compsoul-previous",
        classLoaded: "compsoul-loaded",
        classLoading: "compsoul-loading",
        classError: "compsoul-error",
        classUnset: "compsoul-unset",
        classAnimation: "compsoul-animation",
        classWait: "compsoul-wait",
        classDirectionUp: "compsoul-direction-up",
        classDirectionDown: "compsoul-direction-down",

        selector: selector,

        next: ".compsoul-slide-next",
        prev: ".compsoul-slide-prev",
        nav: ".compsoul-slide-nav",
        timeline: ".compsoul-slide-timeline",
        parent: false,
        height: false,

        cover: true,
        sliderCover: "figure",
        sliderImg: "figure img",

        animation: true,
        animationend: false,

        load: true,
        preload: true,
        first: 0,
        loop: true,

        responsive: {
          400: {
            loop: false
          },
          800: {
            loop: true
          },
          1300: {
            loop: false
          }
        }
      }).init();
    </script>
  </body>
</html>

Table with Description

The table below contains a detailed description of the module settings along with their purpose and default values. The first column presents the setting name to which we assign an option in accordance with the guidelines in the third column. The default values for each setting are presented in the second column. The last column presents a description of the setting. There is the possibility of free expansion of slider settings as well as changing the default settings by editing the slider.js file. Some of the settings have their own separate pages and are described in more detail there.

Property Name Default Value Available Variants Description
id false false, string (text) Depending on the settings, the option value is added as an id attribute to our module container when the modal is in build mode. Changing the settings activates an alternative property option. When the build mode is turned off, indicating box-like behavior of the module, the id option value serves as a CSS selector that the application uses to look for our modal container.
class false false, string (text) The property is associated with the id option. Depending on the settings, the option value is added as a class attribute to our module's container when the modal is in build mode. Changing the settings activates the alternative property option. When the build mode is turned off (indicating the modal's boxed behavior) and the id property is turned off, the class option value serves as a CSS selector that the application uses to find our modal container.
build true boolean (true, false) The build setting changes the way the modal is added to the page. If the option is enabled, elements are created on the application side and added to the end of the element indicated by the parent property. By default, this is the body element. Disabling the option causes the application to retrieve existing elements based on all properties with the element prefix. A more detailed description of the option can be found at this link.
popup true boolean (true, false) The enabled popup option is used to indicate a full-screen instance. The module allows you to simultaneously launch one modal with the popup option enabled. Thanks to this functionality, full-screen modals will not overlap each other.
each false false, this The functionality is used to pass the context during loop iterations when creating instances within it. A full description of the functionality can be found at this link.
parent false CSS selectors, false The value of the option indicates the element where the modal will be added. If the parent option is set to false, the modal will be added at the end of the body element. The option works when the build property is run.
ajax false false, URL The ajax functionality is triggered by specifying the address from which the content should be retrieved. Then, the element specified in the ajaxTarget property is retrieved and placed in the modal content. A detailed description of the functionality can be found on this page.
ajaxTarget selector CSS selectors, false The option indicates the element to be retrieved and displayed inside the modal. If the element is not found or the option is disabled, the entire body content is loaded into the modal.
dom false CSS selectors, false The dom option takes CSS selectors as its value. When the declared element is found, the modal is triggered.
clone false CSS selectors, false The clone function is triggered by changing the value of the clone option to a CSS selector. When the modal is triggered, its content is replaced by the element declared in the option.
ready false boolean (true, false) Enabling the option triggers the modal after the page has loaded.
open false CSS selectors, false The open option takes CSS selectors as its value, pointing to elements that, after the action specified in the openEvent option is performed on them, will cause the modal to open.
openEvent "click" event The option takes an event as its value, which is assigned to the elements declared in the open option.
openDelegation true boolean (true, false) Enabling the option causes the event to be assigned to the body element in order to trigger events on existing elements and those added later in the process. Rozbudowany opis funkcjonalności znajduje się na tej podstronie.
openPrevent true boolean (true, false) This option blocks the default actions from taking place when the openEvent is triggered on elements declared in the open option.
storage false string (text) The storage option is activated by filling its value with the name of the element, which is then added to localStorage. At the time of loading the page, the application checks if a single instance contains the storage option in its settings and compares it with the items in the browser's localStorage. If the value of the storage option exists in the browser's localStorage, the modal is not activated. In the opposite situation, the module is activated. A detailed description of the functionality can be found under this link.
storageAgreement false CSS selectors, false This option takes a CSS selector that points to the elements to which the event declared in the storageEvent option will be assigned. After the declared event is executed, the element is assigned to localStorage, which will not allow the modal to be re-executed according to the description of the storage option.
storageEvent "click" event This option takes an event assigned to elements declared in the storageAgreement option as its value.
slider false CSS selectors, false This functionality allows you to load several elements using a CSS selector placed in the slider option property. Loaded elements are displayed in the modal as a rotator box. More about the slider functionality can be read here.
sliderLoop false boolean (true, false) This option defines how the slider works inside the modal. If it is active, the slider will loop. Disabling the option hides similar arrows on the last and first slide.
sliderEvent "click" event The event responsible for triggering the next slides, assigned to the elements declared in the elementPrev and elementNext options.
sliderDelay 400 number The option takes the time in milliseconds required to perform the animation between slides as its value.
hash true boolean (true, false) Enabling the hash option activates the app's functionality that checks all elements responsible for starting the slider. If the checked element has a data-hash attribute, it will be compared with the variable added in the address bar. If the compared values are identical, the modal is triggered.
hashLocation false false, string The option takes a string of characters that is compared with the variable in the address bar. If their values are identical, the modal is triggered.
overflow true boolean (true, false) When the overflow option is turned on, the main page scrollbar is hidden when the modal is triggered.
close true boolean (true, false) An option that enables or disables the ability to close an already open modal.
closeElement false CSS selectors, false An option that allows us to use a CSS selector to specify additional elements that will be assigned the closeElementEvent event, used to close the modal.
closeElementEvent "click" event An event assigned to additional elements specified in the closeElement option, used to close the modal.
closeSelf true boolean (true, false) Activating the closeSelf option allows you to close the active modal by executing the closeEvent on the element declared in the elementClose option.
closeEvent "click" event An event after which the modal will close.
closeDelegation true boolean (true, false) Option that changes the mode of assigning events to elements responsible for closing modals. If active, the event will be assigned to the body element, allowing new elements responsible for closing to be added without having to reload the page.
closeDelay 400 number The time needed to perform the closing animation of the modal. After completion, the modal is removed (if it was created with the build option).
closeAuto false boolean (true, false) An option that triggers automatic closing of the window at the time the animation declared in the closeAutoEvent option is performed.
closeAutoEvent "animationend" false, string The type of animation assigned to the element indicated in the elementTimer option. After the animation is performed, the modal is closed.
responsive {} object An object that stores a series of settings responsible for changing the behavior of the modal on different resolutions. More information in the RWD tab.

HTML Structure of the Module

Property Name Default Value Available Variants Description
elementContainer ".compsoul-modal-container" CSS selectors, false CSS class taken or added (depending on the settings) to the element creating the structure of the module.
elementMain ".compsoul-modal-main" CSS selectors, false CSS class taken or added (depending on the settings) to the element creating the structure of the module.
elementContent ".compsoul-modal-content" CSS selectors, false CSS class retrieved or added (depending on settings) to the element creating the module structure.
elementTimer ".compsoul-modal-timer" CSS selectors, false CSS class retrieved or added (depending on settings) to the element responsible for the time-based closing of the module.
elementClose ".compsoul-modal-close" CSS selectors, false CSS class retrieved or added (depending on settings) to the element responsible for closing the module.
elementPrev ".compsoul-modal-prev" CSS selectors, false CSS class retrieved or added (depending on settings) to the element responsible for switching slides.
elementNext ".compsoul-modal-next" CSS selectors, false CSS class retrieved or added (depending on settings) to the element responsible for switching slides.

Module Nomenclature

Property Name Default Value Available Variants Description
classActive "modal-active" false, string (text) The CSS class name used to activate elements.
classReady "modal-ready" false, string (text) The CSS class name assigned to the modal immediately after its launch.
classClose "modal-close" false, string (text) The CSS class name used in the process of closing the modal.
classClosing "modal-closing" false, string (text) The CSS class name used in the process of closing the modal.
classError "modal-error" false, string (text) Class name used in the event of incorrect loading of modal content.
classOverflow "modal-overflow" false, string (text) CSS class used to hide the page scroll bar.
classUnset "modal-unset" false, string (text) CSS class used to restart the animation.
classAnimation "modal-animation" false, string (text) CSS class used to restart the animation.
classChange "modal-change" false, string (text) CSS class used during slide changes.

Thank You for Reading

We hope you enjoyed this post! If you did, please consider following us on Facebook and leaving a like and a comment. If you have any questions or need assistance, feel free to use our contact form or email us at daniel@compsoul.dev. For urgent inquiries, you can reach us by phone at +48 732 846 416.