How to create a slider with CSS Background Image Blur (without blurry edges)

Update: This has been rather popular and people have requested I shared the full screen and an example, here is a video of an example where the script was used:

I am not going to write a long story here… I will simply get to the solution:

1. In this case, I used the BXSlider to create the hero slider: https://bxslider.com/
2. There is nothing fancy in the way the slider is implemented or how it works. You can follow the documentation on how to use BxSlider and also check out one of the remaining implementations here: http://afridocs.net/
3. The CSS used is as follows:

Solution: