1. Introduction

You are a shining owner of a regular license based on Photography Slider HTML Template.

Focus Slider is a lightweight, responsive slider template for developers to create clean and modern sliders with ease.

We would like to thank you for choosing Focus Slider and for being our loyal customer. You are entitled to get free updates to this product + exceptional support (as per market policy) from the author directly.

We made Focus Slider from the ground-up with flexibility in mind.
Each element of Focus Slider is extremely customizable, where you can make Focus Slider to reflect your own branding styles.

The guide gives you detailed methodologies about how you can customize Focus Slider and make it fit your brand perfectly!
Please go through the documentation carefully to understand how this product is made and how to edit this properly.
Basic HTML and CSS knowledge is required to customize.

2. Files Organization

Ensure the project folder is well-structured:

  focus-slider/
  ├── documentation/       # Full Documentation in HTML format
  ├── demos/               # Demo files for easy setup
  │   ├── index.html       # Example slider file
  │   ├── assets/          # CSS, SASS, SCSS, JS, Fonts, and Images
  │       ├── css/         # Stylesheets
  │       ├── sass/        # SASS supported files
  │       ├── scss/        # SCSS supported files
  │       ├── js/          # JavaScript files
  │       ├── fonts/       # Fonts imported
  │       ├── img/         # Images used in the demo
  ├── source/              # Unminified source files (CSS/JS)
  └── README.txt           # This file

3. Usage Example

Basic HTML Structure for Focus Slider:

  
  <!-- Gallery -->
  <div class="gallery"> 

    <!-- Gallery Fade Carousel -->
    <div class="swiper-container gallery-slider">
      <div class="swiper-wrapper">

        <!-- Start Gallery Slide -->
        <div class="swiper-slide" style="background: url('assets/image/img-01.jpg') no-repeat center top / cover">
          <div class="container h-100">

            <!-- Caption -->
            <div class="swiper-caption">
              <div class="row">
                <div class=" col-md-5 col-lg-5">

                  <!-- Category -->
                  <span class="swiper-caption__ctg">Dinner</span>

                  <!-- Title -->
                  <h1 class="swiper-caption__ttl">Swordfish Fillet</h1>

                  <!-- Text -->
                  <p class="swiper-caption__txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, neque?
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, ex.
                  </p> 

                  <!-- Link -->
                  <a class="swiper-caption__btn" href="">Order Now</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Gallery Slide -->
      </div>
    </div>
  </div> 
  

4. Code Standards

• Validate all HTML and CSS using tools like the W3C Validator.
• Write clean, well-commented JavaScript code and follow best practices.

5. CSS Structure

  
    <!-- Swiper -->
    <link rel="stylesheet" href="assets/css/swiper.min.css">

    <!-- Bootstrap -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom style -->
    <link rel="stylesheet" href="assets/css/style.min.css">

    <!-- Responsive -->
    <link rel="stylesheet" href="assets/css/responsive.min.css">    
  

6. Fonts Include

Custom Fonts imported inside style.min.css file

    /* Custom Fonts 
  -------------------------*/
  
  @font-face {
    font-family: 'Gilroy';
    src: url('../../assets/fonts/Gilroy-Regular.eot');
    src: url('../../assets/fonts/Gilroy-Regular.eot?#iefix') format('embedded-opentype'),
        url('../../assets/fonts/Gilroy-Regular.woff2') format('woff2'),
        url('../../assets/fonts/Gilroy-Regular.woff') format('woff'),
        url('../../assets/fonts/Gilroy-Regular.ttf') format('truetype'),
        url('../../assets/fonts/Gilroy-Regular.svg#Gilroy-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Gilroy';
    src: url('../../assets/fonts/Gilroy-Bold.eot');
    src: url('../../assets/fonts/Gilroy-Bold.eot?#iefix') format('embedded-opentype'),
        url('../../assets/fonts/Gilroy-Bold.woff2') format('woff2'),
        url('../../assets/fonts/Gilroy-Bold.woff') format('woff'),
        url('../../assets/fonts/Gilroy-Bold.ttf') format('truetype'),
        url('../../assets/fonts/Gilroy-Bold.svg#Gilroy-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
  }    
  

7. JavaScript Structure

  
  <!-- Jquery -->
  <script src="assets/js/jquery.min.js"></script>

  <!-- Swiper -->
  <script src="assets/js/swiper.js"></script>

  <!-- Ion Icons -->
  <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule="" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

  <!-- Bootstrap -->
  <script src="assets/js/bootstrap.min.js" crossorigin="anonymous"></script>

  <!-- Custom -->
  <script src="assets/js/main.min.js"></script>
  

9. Installation

We minified and used the following code to initialize the slider:

      
      /* Fade Carousel 
      -------------------------*/
      var slider = new Swiper ('.gallery-slider', {
          slidesPerView: 1,
          centeredSlides: true,
          loop: true,
          speed: 4000,
          effect: "fade",
          loopedSlides: 3, 
          breakpoints: {
            // when window width is >= 768px
            768: {
              loopedSlides: 2, 
            },
            // when window width is >= 992px
            992: {    
              loopedSlides: 2, 
            },
            // when window width is >= 1199px
            1199: {    
              loopedSlides: 2, 
            },
            // when window width is >= 1280px
            1280: {
              loopedSlides: 3, 
            }
          }
      });
    

10. Customization Options

11. Testing

• Cross-Browser Compatibility: Test the slider on Chrome, Firefox, Edge, and Safari.
• Responsiveness: Ensure it works seamlessly on mobile, tablet, and desktop devices.
• Performance Optimization: Minify CSS/JS files and optimize assets for faster loading times.

12. Sources and Credits

The product uses following resources by third parties.

• Swiper 4.4.1
• Bootstrap 5.3.3
• Fonts Gilroy
• Images Pixabay

13. Support

Email: alissioteam@gmail.com

14. Regular Updates

We’re always improving our skills and knowledge so we’re making changes regularly. From bug fixes to new awesome features, updates generally come at least twice a month.

  V. 1.0.0 – 07.01.2025
  - Initial release

15. Thanks

Once again thank you for purchasing one of our Templates.

Best Regards