589 lines
26 KiB
HTML
589 lines
26 KiB
HTML
{% load static %}
|
|
{% load crispy_forms_tags %}
|
|
<!doctype html>
|
|
<html lang="it">
|
|
|
|
<head>
|
|
<!-- Required meta tags -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<!-- CSS -->
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
|
|
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Dancing+Script:wght@700&display=swap"
|
|
rel="stylesheet">
|
|
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
|
|
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css" />
|
|
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
|
|
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
|
|
<title>Profilo di {{ utente.user }}</title>
|
|
<style>
|
|
#mainbody {
|
|
margin: 0 auto;
|
|
width: 55%;
|
|
height: 100%;
|
|
border: 1px solid black;
|
|
/* --gradient-background: rgba(34, 35, 48, 0.93); */
|
|
background: var(--gradient-background);
|
|
|
|
}
|
|
|
|
#mainbody.DefaultTheme {
|
|
--gradient-background: linear-gradient(90deg, hsla(205, 46%, 30%, 1) 0%, hsla(260, 29%, 36%, 1) 100%);
|
|
--gradient-cards-background: linear-gradient(90deg, hsla(347, 89%, 61%, 1) 0%, hsla(242, 42%, 40%, 1) 100%);
|
|
--card-comments-border-left: 5px solid #1B98E0;
|
|
--nav-link-background: #1B98E0;
|
|
/* background: -moz-linear-gradient(90deg, hsla(205, 46%, 30%, 1) 0%, hsla(260, 29%, 36%, 1) 100%);
|
|
background: -webkit-linear-gradient(90deg, hsla(205, 46%, 30%, 1) 0%, hsla(260, 29%, 36%, 1) 100%); */
|
|
}
|
|
|
|
#mainbody.NightMidnight {
|
|
--gradient-background: #0f0c29;
|
|
/* fallback for old browsers */
|
|
--gradient-background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);
|
|
/* Chrome 10-25, Safari 5.1-6 */
|
|
--gradient-background: linear-gradient(to right, #24243e, #302b63, #0f0c29);
|
|
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
--card-comments-border-left: 5px solid #FFF8F0;
|
|
--gradient-cards-background: hsla(245, 39%, 28%, 1);
|
|
--gradient-cards-background: linear-gradient(225deg, hsla(245, 39%, 28%, 1) 0%, hsla(194, 100%, 66%, 1) 100%);
|
|
--nav-link-background: #110e2c;
|
|
}
|
|
|
|
#mainbody.CrimsonElite {
|
|
--gradient-background: #642B73;
|
|
/* fallback for old browsers */
|
|
--gradient-background: -webkit-linear-gradient(to right, #C6426E, #642B73);
|
|
/* Chrome 10-25, Safari 5.1-6 */
|
|
--gradient-background: linear-gradient(to right, #C6426E, #642B73);
|
|
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
|
|
}
|
|
|
|
#mainbody.DeathStar {
|
|
--gradient-background: #232526;
|
|
/* fallback for old browsers */
|
|
--gradient-background: -webkit-linear-gradient(to right, #414345, #232526);
|
|
/* Chrome 10-25, Safari 5.1-6 */
|
|
--gradient-background: linear-gradient(to right, #414345, #232526);
|
|
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
--gradient-cards-background: #536976;
|
|
/* fallback for old browsers */
|
|
--gradient-cards-background: linear-gradient(to right, #292E49, #536976);
|
|
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
|
--card-comments-border-left: 5px solid #c31432;
|
|
--nav-link-background: #c31432;
|
|
}
|
|
|
|
#biografia {
|
|
padding: 20px 35px 35px;
|
|
font-family: 'Dancing Script', cursive;
|
|
font-size: 25px;
|
|
text-align: center;
|
|
}
|
|
|
|
.card-comments {
|
|
border-left: var(--card-comments-border-left);
|
|
background: var(--gradient-cards-background);
|
|
/* background: hsla(347, 89%, 61%, 1);
|
|
background: linear-gradient(90deg, hsla(347, 89%, 61%, 1) 0%, hsla(242, 42%, 40%, 1) 100%);
|
|
background: -moz-linear-gradient(90deg, hsla(347, 89%, 61%, 1) 0%, hsla(242, 42%, 40%, 1) 100%);
|
|
background: -webkit-linear-gradient(90deg, hsla(347, 89%, 61%, 1) 0%, hsla(242, 42%, 40%, 1) 100%);
|
|
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#F44369", endColorstr="#3E3B92", GradientType=1 ); */
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
color: white;
|
|
background-image: url("{{ utente.background_image.url }}");
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-color: black;
|
|
}
|
|
|
|
.spacename{
|
|
font-size: 70px;
|
|
text-transform: uppercase
|
|
}
|
|
|
|
.adminName{
|
|
background-image: linear-gradient(
|
|
to right,
|
|
#462523 0,
|
|
#cb9b51 22%,
|
|
#f6e27a 45%,
|
|
#f6f2c0 50%,
|
|
#f6e27a 55%,
|
|
#cb9b51 78%,
|
|
#462523 100%
|
|
);
|
|
color:transparent;
|
|
-webkit-background-clip:text;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#img-border {
|
|
border: 3px solid grey;
|
|
}
|
|
|
|
#img-border.Admin {
|
|
border-image: url("https://steamcdn-a.akamaihd.net/steamcommunity/public/assets/rewardsseason1/goldenprofile/presige_frame_anim.png?v=2");
|
|
border-image-slice: 27 27 27 27;
|
|
border-image-width: 20px 20px 20px 20px;
|
|
border-image-outset: 0px 0px 0px 0px;
|
|
border-image-repeat: stretch stretch;
|
|
width: 260px;
|
|
height: 260px;
|
|
border-width: 20px;
|
|
border-style: solid
|
|
}
|
|
|
|
.profileimg {
|
|
width: 260px;
|
|
height: 260px;
|
|
|
|
}
|
|
|
|
.card {
|
|
background: inherit !important;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
#mainbody {
|
|
width: auto;
|
|
height: 100%;
|
|
}
|
|
|
|
.spacename {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.lastimagecomments {
|
|
/* classe utilizzata per ridimensionare le immagini relative agli ultimi commenti scritti */
|
|
height: 150px !important;
|
|
width: 100px !important;
|
|
border: 1px solid whitesmoke;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.table td,
|
|
.table th {
|
|
border-top: none !important;
|
|
}
|
|
|
|
.pfont {
|
|
color: white;
|
|
}
|
|
|
|
#comment-media {
|
|
font-family: 'Caveat', cursive;
|
|
font-size: 20px;
|
|
}
|
|
|
|
#nocomment-media {
|
|
font-family: 'Caveat', cursive;
|
|
font-size: 30px;
|
|
}
|
|
|
|
@media(max-width:1660px) {
|
|
.nav-pills .nav-link {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.table td,
|
|
.table th {
|
|
width: 50%;
|
|
}
|
|
|
|
.isoffline {
|
|
width: 100%;
|
|
height: auto;
|
|
color: white;
|
|
text-align: center;
|
|
background-color: #DD1155;
|
|
}
|
|
|
|
.isonline {
|
|
width: 100%;
|
|
height: auto;
|
|
color: white;
|
|
text-align: center;
|
|
background-color: forestgreen;
|
|
}
|
|
|
|
.modal-title {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.personalprofile {
|
|
background-color: rgba(0, 0, 0, 0.3) !important;
|
|
}
|
|
|
|
.table-hover tbody tr:hover {
|
|
background: transparent;
|
|
}
|
|
|
|
/* SWIPER CSS STYLE */
|
|
.swiper-container {
|
|
width: 100%;
|
|
padding-top: 50px;
|
|
padding-bottom: 50px;
|
|
}
|
|
|
|
.swiper-slide {
|
|
background-position: center;
|
|
background-size: cover;
|
|
width: 284px;
|
|
height: 400px;
|
|
}
|
|
|
|
.nav-tabs {
|
|
border: none !important;
|
|
}
|
|
|
|
.nav {
|
|
width: 100%;
|
|
}
|
|
|
|
.nav-link {
|
|
border: none !important;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.nav-link.active {
|
|
background-color: var(--nav-link-background) !important;
|
|
}
|
|
|
|
.button-uppercase{
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
label{
|
|
color: #0f0c29;
|
|
font-weight: bold;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.asteriskField {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 1920px) {
|
|
body {
|
|
background-size: auto;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="mainbody" class="{{ utente.colore_tema }}">
|
|
<div class="container">
|
|
<div class="row no-gutters mt-4">
|
|
<div class="col-lg-4 text-center my-auto">
|
|
<img class="{% if utente.user.is_staff %} Admin {% endif %}" id="img-border" src="{{ utente.immagine_profilo.url }}" class="profileimg"
|
|
alt="Immagine Profilo di {{ utente.user.username }}">
|
|
</div>
|
|
<div class="col-lg-8">
|
|
<h3 class="text-center spacename {% if utente.user.is_staff %} adminName {% endif %}">{{ utente.user }}</h3>
|
|
<br>
|
|
<br>
|
|
<p id="biografia">{% if utente.biografia == None %} Nessuna biografia al momento D: {% else %}
|
|
{{utente.biografia }} {% endif %}</p>
|
|
{% if request.user == utente.user %}
|
|
|
|
|
|
<div class="row justify-content-center">
|
|
<button class="btn btn-info button-uppercase" data-toggle="modal" data-target="#ModificaProfilo">Modifica
|
|
Profilo</button>
|
|
<a href="{% url 'logout' %}"><button class="btn btn-danger ml-3 button-uppercase">Logout</button></a>
|
|
</div>
|
|
|
|
|
|
<!-- MODAL -->
|
|
<div class="modal fade" id="ModificaProfilo" tabindex="-1" role="dialog"
|
|
aria-labelledby="ModificaProfiloLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="ModificaProfiloLabel" style="color: black;">Modifica
|
|
Profilo</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<form action="" method="POST" enctype="multipart/form-data">
|
|
<div class="modal-body">
|
|
<div class="text-center mb-3" style="font-weight: bold;color: #0f0c29;">Immagine
|
|
Profilo Attuale : </div>
|
|
<div class="text-center" id="imagebox"></div>
|
|
{% csrf_token %}
|
|
{{form|crispy}}
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary"
|
|
data-dismiss="modal">Annulla</button>
|
|
<button type="submit" class="btn btn-primary">Modifica Profilo</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div> <!-- FINE ROW -->
|
|
|
|
<div class="row no-gutters mt-3">
|
|
<div class="col-lg-8 pl-2 pr-3">
|
|
<div class="card-header card-comments mb-1">
|
|
<nav class="nav nav-pills flex-column flex-sm-row">
|
|
<div class="nav nav-tabs" id="nav-tab" role="tablist">
|
|
<a class="flex-sm-fill text-sm-center nav-link active" id="film-preferiti-tab"
|
|
data-toggle="tab" href="#film-preferiti" role="tab" aria-controls="film-preferiti"
|
|
aria-selected="true">FILM PREFERITI</a>
|
|
<a class="flex-sm-fill text-sm-center nav-link" id="serietv-preferite-tab"
|
|
data-toggle="tab" role="tab" aria-controls="serietv-preferite" aria-selected="false"
|
|
href="#serietv-preferite">SERIE TV PREFERITE</a>
|
|
<a class="flex-sm-fill text-sm-center nav-link" id="anime-preferiti-tab"
|
|
data-toggle="tab" role="tab" aria-controls="anime-preferiti" aria-selected="false"
|
|
href="#anime-preferiti">ANIME PREFERITI</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div class="tab-content" id="nav-tabContent">
|
|
<div class="tab-pane fade show active" id="film-preferiti" role="tabpanel"
|
|
aria-labelledby="film-preferiti-tab">
|
|
<div class="card-header card-comments">
|
|
<h3 class="text-center">FILM PREFERITI</h3>
|
|
</div>
|
|
<div class="card mb-3 personalprofile">
|
|
{% if film_lista_preferiti %}
|
|
<div class="swiper-container">
|
|
<div class="swiper-wrapper">
|
|
{% for film_preferiti in film_lista_preferiti %}
|
|
<a class="swiper-slide" href="{{ film_preferiti.get_absolute_url }}"
|
|
style="background-image: url({{ film_preferiti.immagine_poster.url}});"></a>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
{% else %}
|
|
<p>Vuoto :(</p> <!-- DA MODIFICARE CON CSS E FONT -->
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="serietv-preferite" role="tabpanel"
|
|
aria-labelledby="serietv-preferite-tab">
|
|
<div class="card-header card-comments">
|
|
<h3 class="text-center">SERIE TV PREFERITE</h3>
|
|
</div>
|
|
<div class="card mb-3 personalprofile">
|
|
{% if serietv_lista_preferiti %}
|
|
<div class="swiper-container">
|
|
<div class="swiper-wrapper">
|
|
{% for serietv_preferite in serietv_lista_preferiti %}
|
|
<a class="swiper-slide" href="{{ serietv_preferite.get_absolute_url }}"
|
|
style="background-image: url({{ serietv_preferite.immagine_poster.url }});"></a>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
{% else %}
|
|
<p>Vuoto :(</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="anime-preferiti" role="tabpanel"
|
|
aria-labelledby="anime-preferiti-tab">
|
|
<div class="card-header card-comments">
|
|
<h3 class="text-center">ANIME PREFERITI</h3>
|
|
</div>
|
|
<div class="card mb-3 personalprofile">
|
|
{% if anime_lista_preferiti %}
|
|
<div class="swiper-container">
|
|
<div class="swiper-wrapper">
|
|
{% for anime_preferiti in anime_lista_preferiti %}
|
|
<a class="swiper-slide" href="{{ anime_preferiti.get_absolute_url }}"
|
|
style="background-image: url({{ anime_preferiti.immagine_poster.url }});"></a>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
{% else %}
|
|
<p>Vuoto :(</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- WATCH LATER SECTION -->
|
|
|
|
<div class="card-header card-comments mb-1">
|
|
<nav class="nav nav-pills flex-column flex-sm-row">
|
|
<div class="nav nav-tabs" id="nav-tab" role="tablist">
|
|
<a class="flex-sm-fill text-sm-center nav-link active" id="film-da-guardare-tab"
|
|
data-toggle="tab" href="#film-da-guardare" role="tab"
|
|
aria-controls="film-da-guardare" aria-selected="true">FILM DA GUARDARE</a>
|
|
<a class="flex-sm-fill text-sm-center nav-link" id="serietv-da-guardare-tab"
|
|
data-toggle="tab" role="tab" aria-controls="serietv-da-guardare"
|
|
aria-selected="false" href="#serietv-da-guardare">SERIE TV DA GUARDARE</a>
|
|
<a class="flex-sm-fill text-sm-center nav-link" id="anime-da-guardare-tab"
|
|
data-toggle="tab" role="tab" aria-controls="anime-da-guardare" aria-selected="false"
|
|
href="#anime-da-guardare">ANIME DA GUARDARE</a>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div class="tab-content" id="nav-tabContent">
|
|
<div class="tab-pane fade show active" id="film-da-guardare" role="tabpanel"
|
|
aria-labelledby="film-da-guardare-tab">
|
|
<div class="card-header card-comments">
|
|
<h3 class="text-center">FILM DA GUARDARE</h3>
|
|
</div>
|
|
<div class="card mb-3 personalprofile">
|
|
{% if film_watch_later %}
|
|
<div class="swiper-container">
|
|
<div class="swiper-wrapper">
|
|
{% for film_da_guardare in film_watch_later %}
|
|
<a class="swiper-slide" href="{{ film_da_guardare.get_absolute_url }}"
|
|
style="background-image: url({{ film_da_guardare.immagine_poster.url}});"></a>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
{% else %}
|
|
<p>Vuoto :(</p> <!-- DA MODIFICARE CON CSS E FONT -->
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="serietv-da-guardare" role="tabpanel"
|
|
aria-labelledby="serietv-da-guardare-tab">
|
|
<div class="card-header card-comments">
|
|
<h3 class="text-center">SERIE TV DA GUARDARE</h3>
|
|
</div>
|
|
<div class="card mb-3 personalprofile">
|
|
{% if serietv_watch_later %}
|
|
<div class="swiper-container">
|
|
<div class="swiper-wrapper">
|
|
{% for serietv_da_guardare in serietv_watch_later %}
|
|
<a href="{{ serietv_da_guardare.get_absolute_url }}" class="swiper-slide"
|
|
style="background-image: url({{ serietv_da_guardare.immagine_poster.url }});"></a>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
{% else %}
|
|
<p>Vuoto :(</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="anime-da-guardare" role="tabpanel"
|
|
aria-labelledby="anime-da-guardare-tab">
|
|
<div class="card-header card-comments">
|
|
<h3 class="text-center">ANIME DA GUARDARE</h3>
|
|
</div>
|
|
<div class="card mb-3 personalprofile">
|
|
{% if anime_watch_later %}
|
|
<div class="swiper-container">
|
|
<div class="swiper-wrapper">
|
|
{% for anime_da_guardare in anime_watch_later %}
|
|
<a class="swiper-slide" href="{{ anime_da_guardare.get_absolute_url }}"
|
|
style="background-image: url({{ anime_da_guardare.immagine_poster.url }});"></a>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
{% else %}
|
|
<p>Vuoto :(</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 mr-0">
|
|
{% if utente.is_online %}
|
|
<div class="isonline mb-3">
|
|
Profilo Online
|
|
</div>
|
|
{% else %}
|
|
<div class="isoffline mb-3">
|
|
Profilo Offline
|
|
</div>
|
|
{% endif %}
|
|
<div class="card personalprofile">
|
|
<div class="card-comments">
|
|
<h3 class="text-center">ULTIMI COMMENTI</h3>
|
|
</div>
|
|
<table class="table table-hover">
|
|
<tbody>
|
|
{% for comments in commenti %}
|
|
<tr class="row no-gutters">
|
|
<th class="pr-0 pl-1"><a href="{{ comments.media.get_absolute_url }}"><img
|
|
src="{{ comments.media.immagine_poster.url }}"
|
|
class="img-fluid lastimagecomments" alt=""></a></th>
|
|
<td class="mt-2"><a href="{{ comments.media.get_absolute_url }}">
|
|
<p class="pfont text-center">{{ comments.media.titolo }}</p>
|
|
</a>
|
|
<p id="comment-media" class="text-center pfont">{{comments.commento|truncatewords:8 }}</p>
|
|
</td>
|
|
</tr>
|
|
</a>
|
|
{% empty %}
|
|
<p id="nocomment-media" class="text-center pfont">Nessun Commento Scritto D:</p>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JAVASCRIPT FILES -->
|
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
|
|
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
|
|
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
|
|
crossorigin="anonymous"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
|
|
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
|
|
crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
|
|
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
|
|
<script src="{% static '/js/profilo.js' %}"></script>
|
|
|
|
<!-- SWIPER JS CODE -->
|
|
<script>
|
|
$(function () {
|
|
var swiper = new Swiper('.swiper-container', {
|
|
effect: 'coverflow',
|
|
grabCursor: true,
|
|
observer: true,
|
|
observeParents: true,
|
|
centeredSlides: true,
|
|
slidesPerView: 'auto',
|
|
coverflowEffect: {
|
|
rotate: 50,
|
|
stretch: 0,
|
|
depth: 100,
|
|
modifier: 1,
|
|
slideShadows: true,
|
|
},
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
},
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |