Siema - Two divs per page

Developer
Pawel Grzybek
Size
2,666 Kb
Views
54,648
  1. Siema - Two divs per page Previews
  2. Siema - Two divs per page HTML Codes
  3. Siema - Two divs per page CSS Codes
  4. Siema - Two divs per page JS Codes

How do I make an siema - two divs per page?

What is a siema - two divs per page? How do you make a siema - two divs per page? This script and codes were developed by Pawel Grzybek on 23 June 2022, Thursday.

Siema - Two divs per page Previews
IQ Test

Siema - Two divs per page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Siema - Two divs per page</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="siema"> <div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div> <div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div> <div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div> <div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>
</div>
<button class="prev">Prev</button>
<button class="next">Next</button> <script src='https://pawelgrzybek.com/siema/assets/siema.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Siema - Two divs per page - Script Codes CSS Codes

body { width: 100%; max-width: 30rem; margin: 0 auto;
}
img { width: 100%;
}
.siema { margin: 1rem 0;
}

Siema - Two divs per page - Script Codes JS Codes

'use strict';
// perPage accepts two kind of data as a value
// Number:
// fixed amount of slider for all resolutions
// example:
// const mySiema = new Siema({
// perPage: 2,
// });
// Object
// more complex configuration allows you to specify
// number of slides dependable of browsers viewport
// example below show single slide on small viewpoer
// 2 slider on scrrens wider than 768px
// 3 slider on scrrens wider than 1024px
// example:
// const mySiema = new Siema({
// perPage: {
// 768: 2,
// 1024: 3,
// },
// });
var mySiema = new Siema({ perPage: 2
});
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');
prev.addEventListener('click', function () { return mySiema.prev();
});
next.addEventListener('click', function () { return mySiema.next();
});
Siema - Two divs per page - Script Codes
Siema - Two divs per page - Script Codes
Home Page Home
Developer Pawel Grzybek
Username pawelgrzybek
Uploaded June 23, 2022
Rating 3
Size 2,666 Kb
Views 54,648
Do you need developer help for Siema - Two divs per page?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Pawel Grzybek (pawelgrzybek) Script Codes
Name
ObjectFit fallback for IE and Edge
2015.05.09 - 3
2016-02-19-css-custom-properties-explained
Siema - multiple instances on a same page
Siema - update size on container size change
Siema - loop
2015.05.09 - 2
Siema - Responsive solution
Siema - onInit and onChange callbacks use
Siema - onChange
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!