Главная » Языки программирования

Html slideshow with links

Содержание
  1. 28 CSS Slideshows
  2. Table Of Contents
  3. Related Articles
  4. Vertical Slideshows
  5. Author
  6. Links
  7. Made with
  8. About a code
  9. Doggie Screensaver
  10. Author
  11. Links
  12. Made with
  13. About a code
  14. CSS Slideshow
  15. Author
  16. Links
  17. Made with
  18. About the code
  19. Slideshow Vanilla JS
  20. Author
  21. Links
  22. Made with
  23. About the code
  24. Untitled Slider
  25. Author
  26. Links
  27. Made with
  28. About the code
  29. Parallax Slideshow
  30. Split Slick Slideshow
  31. Slideshow Presentation
  32. Dual Slideshow
  33. A Pure CSS3 Slideshow
  34. Horizontal Slideshows
  35. Author
  36. Links
  37. Made with
  38. About the code
  39. CSS-only Slideshow
  40. Author
  41. Links
  42. Made with
  43. About the code
  44. Rotating Background Image Slideshow
  45. Author
  46. Links
  47. Made with
  48. About the code
  49. Slideshow with HTML/CSS
  50. Author
  51. Links
  52. Made with
  53. About the code
  54. Spooky Scary Clip Text
  55. Author
  56. Links
  57. Made with
  58. About the code
  59. Slideshow Concept
  60. Author
  61. Links
  62. Made with
  63. About the code
  64. Silhouette Zoom Slideshow
  65. Author
  66. Links
  67. Made with
  68. About the code
  69. Geometrical Birds — Slideshow
  70. Author
  71. Links
  72. Made with
  73. About the code
  74. Bubble Slideshow Component
  75. Author
  76. Links
  77. Made with
  78. About the code
  79. Slideshow Parallax
  80. Split-Screen Slideshow
  81. Only CSS Slideshow Effect
  82. Slick Slideshow With Blur Effect
  83. CSS Fadeshow
  84. Author
  85. W3.CSS Slideshow
  86. Example
  87. Example
  88. Example
  89. JavaScript Explained
  90. Automatic Slideshow
  91. Example
  92. HTML Slides
  93. How TO — Slideshow
  94. Slideshow / Carousel
  95. Create A Slideshow
  96. Example
  97. Example
  98. Example
  99. Automatic Slideshow
  100. Example
  101. Multiple Slideshows
  102. Example

28 CSS Slideshows

Collection of free HTML and CSS slideshow code: simple, responsive, animated, horizontal, vertical, etc. Update of March 2019 collection. 4 new example.

Table Of Contents

Vertical Slideshows

Author

Made with

About a code

Doggie Screensaver

Pretty hacky attempt at recreating the floating screensaver for the photo gallery.

Читайте также:  What about init method in java

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

CSS Slideshow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Slideshow Vanilla JS

Author

Made with

About the code

Slideshow Vanilla JS

Custom slideshow with staggered transitions. Built in vanilla JS.

Demo image: Untitled Slider

Author

Made with

About the code

Untitled Slider

A small experiment which quickly turned into something more.

Demo image: Parallax Slideshow

Author

Made with

About the code

Parallax Slideshow

HTML, CSS and JS slideshow with parallax effect.

Demo Image: Split Slick Slideshow

Split Slick Slideshow

Vertical slideshow in split screen.
Made by Fabio Ottaviani
March 29, 2017

Demo Image: Slideshow Presentation

Slideshow Presentation

Navigate using the up and down arrow keys.
Made by Keith Driessen
March 9, 2016

Demo Image: Dual Slideshow

Dual Slideshow

Just playing around with a dual pane slideshow concept.
Made by Jacob Davidson
April 17, 2015

Demo Image: A Pure CSS3 Slideshow

A Pure CSS3 Slideshow

The transition treats each part of the photo as a blind, closes them all together, and when they are open again, a new photo is revealed underneath.
Made by Stathis
October 3, 2013

Horizontal Slideshows

Author

Made with

About the code

CSS-only Slideshow

An idea for a page header slideshow.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Rotating Background Image Slideshow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Slideshow with HTML/CSS

Slideshow made with HTML/CSS. Any javascript code is used.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Spooky Scary Clip Text

Spooky CSS only image slideshow with text clipping.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Made with

About the code

Slideshow Concept

A pure CSS and HTML slideshow concept. To add or remove slides: 1. add a new slide template in the HTML; 2. update the $slide-count SCSS variable; 3. tab colours: update the $c-slides SCSS variable 4. slide popout images: update the $b-slides SCSS variable. Use the tabs below to change slide.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Silhouette Zoom Slideshow

Author

Made with

About the code

Silhouette Zoom Slideshow

Slide show where the person in the current frame is used to zoom into the next frame.

Demo image: Geometrical Birds - Slideshow

Author

Made with

About the code

Geometrical Birds — Slideshow

83 triangles morphing and changing color into different birds.

Demo image: Bubble Slideshow Component

Author

Made with

About the code

Bubble Slideshow Component

This is a Vue component that uses clip-path for an interesting slideshow transition effect.

Demo image: Slideshow Parallax With TweenMax

Author

Made with

About the code

Slideshow Parallax

Slideshow Parallax with TweenMax.js

Demo Image: Split-Screen Slideshow

Split-Screen Slideshow

HTML, CSS and JavaScript split-screen slideshow.
Made by Sean Free
January 9, 2017

Demo Image: Only CSS Slideshow Effect

Only CSS Slideshow Effect

Ken Burns slideshow effect CSS only.
Made by Dima
December 12, 2016

Demo Image: Slick Slideshow With Blur Effect

Slick Slideshow With Blur Effect

Slideshow with blur effect in HTML, CSS and JavaScript.
Made by Fabio Ottaviani
November 11, 2016

Demo Image: CSS Fadeshow

CSS Fadeshow

This is an extended version of pure CSS slideshow gallery http://codepen.io/alexerlandsson/pen/RaZdox which comes with more and easier customisation and previous/next buttons.
Made by Alexander Erlandsson
October 24, 2016

Author

Источник

W3.CSS Slideshow

Displaying a manual slideshow with W3.CSS is very easy.

Just create many elements with the same class name:

Example




And two buttons to scroll the images:

Example

And add a JavaScript to select images:

Example

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) showDivs(slideIndex += n);
>

function showDivs(n) var i;
var x = document.getElementsByClassName(«mySlides»);
if (n > x.length)
if (n < 1) ;
for (i = 0; i < x.length; i++) x[i].style.display = "none";
>
x[slideIndex-1].style.display = «block»;
>

JavaScript Explained

First, set the slideIndex to 1. (First picture)

Then call showDivs() to display the first image.

When the user clicks one of the buttons call plusDivs().

The plusDivs() function subtracts one or adds one to the slideIndex.

The showDiv() function hides (display=»none») all elements with the class name «mySlides», and displays (display=»block») the element with the given slideIndex.

If the slideIndex is higher than the number of elements (x.length), the slideIndex is set to zero.

If the slideIndex is less than 1 it is set to number of elements (x.length).

Automatic Slideshow

To display an automatic slideshow is even simpler.

You only need a little different JavaScript:

Example

var slideIndex = 0;
carousel();

function carousel() var i;
var x = document.getElementsByClassName(«mySlides»);
for (i = 0; i < x.length; i++) x[i].style.display = "none";
>
slideIndex++;
if (slideIndex > x.length)
x[slideIndex-1].style.display = «block»;
setTimeout(carousel, 2000); // Change image every 2 seconds
>

HTML Slides

The slides do not have to be images.

They can be any HTML content:

Источник

How TO — Slideshow

Learn how to create a responsive slideshow with CSS and JavaScript.

A slideshow is used to cycle through elements:

Create A Slideshow

Step 1) Add HTML:

Example

Step 2) Add CSS:

Style the next and previous buttons, the caption text and the dots:

Example

/* Slideshow container */
.slideshow-container max-width: 1000px;
position: relative;
margin: auto;
>

/* Hide the images by default */
.mySlides display: none;
>

/* Next & previous buttons */
.prev, .next cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
>

/* Position the «next button» to the right */
.next right: 0;
border-radius: 3px 0 0 3px;
>

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover background-color: rgba(0,0,0,0.8);
>

/* Caption text */
.text color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
>

/* Number text (1/3 etc) */
.numbertext color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
>

/* The dots/bullets/indicators */
.dot cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
>

.active, .dot:hover background-color: #717171;
>

/* Fading animation */
.fade animation-name: fade;
animation-duration: 1.5s;
>

Step 3) Add JavaScript:

Example

let slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) showSlides(slideIndex += n);
>

// Thumbnail image controls
function currentSlide(n) showSlides(slideIndex = n);
>

function showSlides(n) let i;
let slides = document.getElementsByClassName(«mySlides»);
let dots = document.getElementsByClassName(«dot»);
if (n > slides.length)
if (n < 1)
for (i = 0; i < slides.length; i++) slides[i].style.display = "none";
>
for (i = 0; i < dots.length; i++) dots[i].className = dots[i].className.replace(" active", "");
>
slides[slideIndex-1].style.display = «block»;
dots[slideIndex-1].className += » active»;
>

Automatic Slideshow

To display an automatic slideshow, use the following code:

Example

let slideIndex = 0;
showSlides();

function showSlides() let i;
let slides = document.getElementsByClassName(«mySlides»);
for (i = 0; i < slides.length; i++) slides[i].style.display = "none";
>
slideIndex++;
if (slideIndex > slides.length)
slides[slideIndex-1].style.display = «block»;
setTimeout(showSlides, 2000); // Change image every 2 seconds
>

Multiple Slideshows

Example

let slideIndex = [1,1];
/* Class the members of each slideshow group with different CSS classes */
let slideId = [«mySlides1», «mySlides2»]
showSlides(1, 0);
showSlides(1, 1);

function plusSlides(n, no) showSlides(slideIndex[no] += n, no);
>

function showSlides(n, no) let i;
let x = document.getElementsByClassName(slideId[no]);
if (n > x.length)
if (n < 1)
for (i = 0; i < x.length; i++) x[i].style.display = "none";
>
x[slideIndex[no]-1].style.display = «block»;
>

Источник

Оцените статью
© 2024 Программирование