slider

слайдер с неправильной формой

by Vladislav Altyncev

HTML

<script src="http://shadow.perm.ru/test/js/jquery.bxslider.min.js"></script>
<link rel="stylesheet" href="http://shadow.perm.ru/test/css/jquery.bxslider.css">
<div class="main_slider">
    <ul>
        <li style="background: #fff url(images/slider-img.jpg) no-repeat 50% 100%;" class="main_slider-item">
            <div>
                <h3><a href="#" target="_self">Яркий<br>Sale</a></h3>
            </div>
        </li>
        <li style="background: #fff url(images/slider-img.jpg) no-repeat 50% 100%;" class="main_slider-item">
            <div>
                <h3><a href="#" target="_self">Яркий<br>Sale2</a></h3>
            </div>
        </li>
        <li style="background: #fff url(images/slider-img.jpg) no-repeat 50% 100%;" class="main_slider-item">
            <div>
                <h3><a href="#" target="_self">Яркий<br>Sale3</a></h3>
            </div>
        </li>
        <li style="background: #fff url(images/slider-img.jpg) no-repeat 50% 100%;" class="main_slider-item">
            <div>
                <h3><a href="#" target="_self">Яркий<br>Sale4</a></h3>
            </div>
        </li>
        <li style="background: #fff url(images/slider-img.jpg) no-repeat 50% 100%;" class="main_slider-item">
            <div>
                <h3><a href="#" target="_self">Яркий<br>Sale5</a></h3>
            </div>
        </li>
    </ul>
    <div id="main_slider-prev" class="main_slider-btn"></div>
    <div id="main_slider-next" class="main_slider-btn"></div>
</div>

CSS

body {
    background: pink;
    padding: 10px;
}

/*===================================
=            Main Slider            =
===================================*/
.main_slider { width: 820px; height: 520px; margin: 0 auto; position: relative; }
@media (max-width: 830px) { .main_slider { width: 100%; height: 450px; } }
@media (max-width: 768px) { .main_slider { height: 300px; margin-bottom: 60px; } }
.main_slider .bx-viewport { border-radius: 35% 35% 35% 35% / 15% 15% 15% 15%; overflow: hidden; background: none; left: 0; border: 0; box-shadow: 0px 21px 35px rgba(0, 0, 0, 0.26); }
.main_slider ul { margin: 0; padding: 0; list-style: none; }
.main_slider-item { border-radius: 35% 35% 35% 35% / 15% 15% 15% 15%; background: #fff; overflow: hidden; height: 520px; background-size: cover !important; }
@media (max-width: 830px) { .main_slider-item { height: 450px; } }
@media (max-width: 768px) { .main_slider-item { height: 300px; } }
.main_slider-item > div { position: absolute; right: 35px; top: 65px; text-align: right; }
@media (max-width: 768px) { .main_slider-item > div { top: 25px; } }
.main_slider-item > img { display: block; vertical-align: top; margin: 0 auto; }
.main_slider-item h3, .main_slider-item .h3 { font-family: 'Nautilus Pompilius'; font-size: 82px; line-height: 80px; color: #cb0931; }
@media (max-width: 768px) { .main_slider-item h3, .main_slider-item .h3 { font-size: 36px; line-height: 1.2; } }
.main_slider-item h3 a:hover, .main_slider-item .h3 a:hover { text-decoration: none; }

.main_slider-btn { width: 47px; height: 47px; display: block; position: absolute; top: 50%; }
.main_slider-btn > a { width: 47px; height: 47px; display: block; background: url(http://shadow.perm.ru/images/slider-btn.webp) no-repeat 0 0; text-indent: -999em; overflow: hidden; }
.main_slider-btn > a:hover { opacity: .75; }

.no-webp .main_slider-btn > a { background: url(http://shadow.perm.ru/images/slider-btn.png) no-repeat 0 0; }

#main_slider-prev { left: -57px;...

JavaScript

$('.main_slider ul').bxSlider({
		mode: 'fade',
		nextSelector: '#main_slider-next',
		prevSelector: '#main_slider-prev'
	});