Skip to content
This is a fadeshow (slideshow with fade effect) made in CSS only. The slideshow is built in SCSS which provides customization and easy adaption to your site.
Branch: master
Clone or download
Latest commit 0695e75 Mar 11, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
demo Cleaned up demo Feb 22, 2018
scss Added comments to one component Mar 6, 2019
.gitignore Added npm-debug to gitignore and linted the scss Feb 17, 2017
.sass-lint.yml Updated sass-lint to output in terminal instead of a file Feb 15, 2017
README.md Updated README Mar 11, 2019
_config.yml Set theme jekyll-theme-minimal Mar 30, 2017
gulpfile.js Changed name of cleancss to minifycss to be more clear Mar 6, 2019
package-lock.json Replaced gulp-minify-css with gulp-clean-css Mar 6, 2019
package.json Replaced gulp-minify-css with gulp-clean-css Mar 6, 2019

README.md

CSS Fadeshow

This is a fadeshow (slideshow with fade effect) made in CSS only. The slideshow is built in SCSS which provides customization and easy adaption to your site. All you have to do is to change the variables in css-slideshow.scss.

For a stable version, always download from the Release page.

Demo: http://alexerlandsson.github.io/css-fadeshow/demo/demo.html

Why use CSS Fadeshow?

  • No JavaScript is needed (HTML and CSS only)
  • Great browser support
  • Easy to customize
  • Easy to add custom themes
  • Lightweight (3.4KB gzipped with 5 slides and all modifiers included, 2.4KB with autoplay disabled)
  • Modular Addons (Modifiers)

Quick start

1. Create the HTML markup

The default markup looks like this:

<div data-fadeshow="quick-nav prev-next-nav slide-counter autoplay ken-burns">

  <!-- Radio -->
  <input type="radio" name="css-fadeshow" id="fs-slide-1" />
  <input type="radio" name="css-fadeshow" id="fs-slide-2" />
  <input type="radio" name="css-fadeshow" id="fs-slide-3" />

  <!-- Slides -->
  <div class="fs-slides">
    <div class="fs-slide">
      <div class="fs-slide-bg" style="background-image: url();"></div>
      <!-- Other content goes here... -->
    </div>
    <div class="fs-slide">
      <div class="fs-slide-bg" style="background-image: url();"></div>
      <!-- Other content goes here... -->
    </div>
    <div class="fs-slide">
      <div class="fs-slide-bg" style="background-image: url();"></div>
      <!-- Other content goes here... -->
    </div>
  </div>

  <!-- Quick Navigation -->
  <div class="fs-quick-nav">
    <label class="fs-quick-btn" for="fs-slide-1"></label>
    <label class="fs-quick-btn" for="fs-slide-2"></label>
    <label class="fs-quick-btn" for="fs-slide-3"></label>
  </div>

  <!-- Prev Navigation -->
  <div class="fs-prev-nav">
    <label class="fs-prev-btn" for="fs-slide-1"></label>
    <label class="fs-prev-btn" for="fs-slide-2"></label>
    <label class="fs-prev-btn" for="fs-slide-3"></label>
  </div>

  <!-- Next Navigation -->
  <div class="fs-next-nav">
    <label class="fs-next-btn" for="fs-slide-1"></label>
    <label class="fs-next-btn" for="fs-slide-2"></label>
    <label class="fs-next-btn" for="fs-slide-3"></label>
  </div>

  <!-- Slide Counter (only one required) -->
  <div class="fs-slide-counter">
    <span class="fs-slide-counter-current"></span>/<span class="fs-slide-counter-total"></span>
  </div>

</div>

2. Modify the markup

2.1 Add Slides, Quick Navigation, Prev/Next Navigation and Slide Counter

The fadeshow contains of six sections (radio, slides, quick navigation, prev navigation, next navigation and slide counter). To add a slide, you need to add one if each but slide container (as markup shows above). It is important to keep the same structure and order. The CSS will check for the nth-child inside it's containers, so be sure to not change the class names.

The markup inside .fs-slide is optional and could be anything. The .fs-slide-bg class is however target for Ken Burns effect, so if you want that feature, that class name is necessary.

2.2 Select Modifiers

Modifiers are used to add functions in a modular way. You can choose which modifiers to use or not. All different combinations are possible!

2.2.1 quick-nav

Quick Navigation is the navigation showed at the bottom. This navigation lets you navigate between any slides instantly. Example:

<div data-fadeshow="quick-nav"></div>
2.2.2 prev-next-nav

Decides if the prev/next buttons should be used or not. If set, the buttons will be used. Example:

<div data-fadeshow="prev-next-nav"></div>
2.2.3 slide-counter

This modifier adds a slide counter to the fadeshow. This will be displayed as "1/5" when on the first slide etc. Example:

<div data-fadeshow="slide-counter"></div>
2.2.4 ken-burns

This modifier adds Ken Burns effect to the slide's images. Example:

<div data-fadeshow="ken-burns"></div>
2.2.5 autoplay

Add autoplay to the gallery. Interaction with navigation will result in cancelation of autoplay. Autoplay will work on load. When autoplay is active, Prev/Next Navigation and Slide Counter won't be visible. The only way to cancel the autoplay is to use Quick Navigation to navigate to another slide. When the autoplay is canceled, Prev/Next Navigation and Slide Counter will be displayed if added to the fadeshow. Example:

<div data-fadeshow="autoplay"></div>

3. Include the CSS to the HTML

Add the following line to your HTML file in the head tag:

<link rel="stylesheet" href="YOUR_PATH/css-fadeshow.min.css">

Customized Installation

To customize the installation, download the folder named scss and include the file css-fadeshow.scss in your project. This way of implementation is highly recommended due to the possibility to customize the styling. SCSS is required when using the fadeshow in this way.

Global variables and mixins are used and should be taking into consideration before including the scss files into your project. All variables and mixins are prefixed with "fs-".

Settings

All settings are managed from /global/settings.scss. In this file you will find variables used through the project.

The first variables are labeled "Modifiers to include". These defines which modifiers you want to use in your implementation. If you're planning to not use some of the modifiers – set these to false. This will result in a smaller CSS. The same goes for number of slides – the more slides you want to have, the larger the CSS file will be.

Tip: If you want the css as small as possible, I suggest you to disable autoplay since it generates a lot of code in order to work.

Variable Type Default Description
$fs-include-autoplay boolean true Whether to include Autoplay or not.
$fs-include-prevnextnav boolean true Whether to include Prev/Next Navigation or not.
$fs-include-quicknav boolean true Whether to include Quick Navigation or not.
$fs-include-slidecounter boolean true Whether to include Slide Counter or not.
$fs-include-kenburns boolean true Whether to include Ken Burns effect to background image or not.
$fs-max-slides integer 5 Defines the maximum of images allowed. There is no technical limit, but the higher number, the larger the CSS file will be.
$fs-fade-time integer 1 Change to the desired transition time of the fade between images. Value counts in seconds.
$fs-fade-color hex #fff Background color behind the images. Will be a part of the transitions between images.
$fs-prefix boolean true Set to false if you don't want the compiled CSS to include prefixes.
$fs-prevnextnav-loop boolean true Set to false to hide the prev button on first slide and the next button on last slide.
$fs-quicknav-duration integer 0.2 Set the transition duration of the Quick Navigation during autoplay. Value counts in seconds.
$fs-autoplay-duration integer 5 Set the duration of each slide in autoplay mode. Value counts in seconds.
$fs-autoplay-prevnextnav boolean true Adds autoplay to Prev/Next Navigation while autoplay is running.
$fs-autoplay-quicknav boolean true Adds autoplay to Quick Navigation while autoplay is running.
$fs-autoplay-slidecounter boolean false Adds autoplay to Slide Counter while autoplay is running. Animating content in pseudo elements is poorly supported so be careful before activating this.
$fs-autoplay-kenburns boolean true Adds autoplay to Ken Burns effect while autoplay is running.
$fs-kenburns-duration integer 5 Set the duration of Ken Burns effect. Value counts in seconds.
$fs-kenburns-scale decimal 1.05 (5%) Set the zoom of Ken Burns effect.

Custom Theme

The theme of CSS Fadeshow comes separated from the core functionality. This makes is easy to apply your own theme. You'll find a theme boilerplate located in /scss/theme/themes/theme-boilerplate. Use these files to create your own theme. When you're done, name the theme folder and change the path to your theme in theme.scss.

Important: Do not change name or remove any of the mixins used in the theme template. These are required.

Working in this Repository

If you want to fork this repository to work on your own modifications, it's easy to get started. The project uses Gulp to compile the SCSS files, so all you have to do is to run npm install from Terminal before you start. After all dependencies are installed, use gulp, gulp sass or gulp watch to compile the SCSS.

Sass Lint

This project uses Sass Lint to ensure a good coding standard. To run the lint, run npm run sass-lint from Terminal after you have installed the dependencies with npm install. Sass Lint will output the result in the terminal.

Browser Compatibility

Chrome Safari Firefox Opera IE
Yes
Yes
Yes
Yes
9*+

* Internet Explorer 9 does not support css transitions and css animations. This means there will be no smooth transitions between slides and autoplay and Ken Burns functions will not work since these functions relies on the two methods.

License

The MIT License (MIT)

Copyright (c) 2016 Alexander Erlandsson

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

You can’t perform that action at this time.