This is my personal small template to quick start in layout creating.
- HTML5
- CSS3 + SASS
- Bootstrap v5.3.2
- jQuery v3.7.1
- Swipper v11.0.4
- fancyapps/ui v5.0.28 (ex. fancybox)
- FontAwesome icons v6.4.2
- axios v1.1.2 (Warning! This script need to create simple
POST
/GET
queries only if you are not using jQuery. On example page this script commented!)
It's very simple:
<!-- In addition to Swiper's CSS styles, we may need to add some custom styles to set Swiper size -->
<style>
.swiper {
width: 600px;
height: 300px;
}
</style>
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
<script>
$(document).ready(function(){
const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
});
</script>
It's much easier than using swipper slider :)
<a data-fancybox="gallery" href="big_image.jpg"><img src="small_image.jpg"></a>
<script>Fancybox.bind("[data-fancybox]");</script>
This will help us a fancybox plugin:
You have to place a DIV
container into the content of the page:
<a data-fancybox data-src="#hidden-content" href="javascript:;">
Show modal window
</a>
Then simply create a link using data-src
attribute that matches CSS id selector of the element you want to open (#hidden-content
in this example):
<div style="display: none;" id="hidden-content">
<h2>Hello</h2>
<p>World!</p>
</div>
And don't forget to initialize it!
<script>
Fancybox.bind("[data-fancybox]", {
// Your custom options
});
</script>
axios - Promise based HTTP client for the browser and node.js
Performing a GET
request:
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
}
);
Performing a POST
request:
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
}
);
new:
- slick slider abandoned, now used swipper slider
- added examples in example.html
updates:
- axios updated to 1.1.2
- bootstrap updated to 5.3.2
- fancyapps/ui updated to 5.0.28
- FontAwesome icons updated to 6.4.2
- jQuery updated to 3.7.1
* For more documentation please visit official site.