Günümüzde neredeyse tüm web sayfalarında elimizle sürükleyip bıraktığımız animasyon yapılı sayfalar kullanılmaktadır. Bu makalede ASP.NET Core MVC projesini Visual Studio 2022 ile oluşturup üçüncü parti bir kütüphane olan Swiper ile gerçekleştireceğiz.
Visual Studio 2022'yi açalım.
Yeni Proje seçeneğini tıklayalım.
ASP.NET Core Empty Web Uygulaması şablonunu seçip İleri'ye tıklayalım.
Proje adı ve konumu belirledikten sonra İleri'ye tıklayalım.
.NET 6 veya daha güncel bir sürümü seçtiğinizden emin olun.
Oluştur butonuna tıklayıp projeyi oluşturalım.
Swiper kütüphanesini kullanmak için CDN (Content Delivery Network) bağlantılarını ya da yerel dosyaları kullanabilirsiniz. Bu örnekte CDN kullanacağız.
_Layout.cshtml dosyasını açalım ve gerekli Swiper CSS ve JS dosyalarını ekleyelim. Bu dosya genellikle Views/Shared/_Layout.cshtml içinde bulunur.
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
Şimdi Swiper'ı kullanacağımız Views/Web/Uyg6/Index.cshtml dosyasını oluşturacağız. Bu dosyada, Swiper bileşenini HTML ile tanımlayacağız.
@{
ViewData["Title"] = "Swiper Demo";
}
<link href="~/wwwroot/css/site.css" rel="stylesheet" />
<div class="swiper-container">
<div class="swiper-wrapper">
@for (int i = 1; i <= 10; i++)
{
<div class="swiper-slide">Slide @i</div>
}
</div>
<!-- Sayfalama (Pagination) -->
<div class="swiper-pagination"></div>
<!-- Navigasyon butonları -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<script src="~/wwwroot/js/site.js"></script>
Bu kodda, 10 adet Swiper slaytı oluşturdum. swiper-slide sınıfını her bir slayt için kullanıyoruz.
Şimdi Swiper'ı çalıştıracak JavaScript kodunu yazacağız. Bu kodu wwwroot/js/site.js dosyasına ekleyeceğiz.
document.addEventListener('DOMContentLoaded', function () {
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
type: 'fraction', // Sayfalama tipini belirliyoruz
},
navigation: {
nextEl: '.swiper-button-next', // Sonraki buton
prevEl: '.swiper-button-prev', // Önceki buton
},
});
});
Bu JavaScript kodu, Swiper bileşeninin işlevselliğini başlatacaktır. Sayfa yüklendikten sonra Swiper'ı başlatıyoruz.
Eğer Swiper’ın stilini değiştirmek isterseniz, CSS dosyanızda bazı düzenlemeler yapabilirsiniz. Bunun için wwwroot/css/site.css dosyasını açın ve Swiper’ın görünümünü özelleştirebilirsiniz.
.swiper-container {
width: 100%;
height: 400px; /* Yüksekliği belirleyin */
}
.swiper-slide {
background: #ff6347; /* Slayt arka planı */
color: white;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
}
Eğer dinamik içerik kullanmak isterseniz, Uyg6Controller'ı güncelleyebilirsiniz. Ancak bu örnekte statik içerik kullanıyoruz, bu nedenle ek bir değişiklik yapmanıza gerek yok.
using Microsoft.AspNetCore.Mvc;
namespace Temrinler11HCore.Controllers.Web
{
public class Uyg6wController : Controller
{
public IActionResult Index()
{
return View("~/Views/Web/Uyg6w/Index.cshtml");
}
}
}
Artık her şey hazır. Visual Studio 2022 içinde F5 tuşuna basarak veya Debug > Start Debugging menüsünü kullanarak projeyi çalıştırabilirsiniz.
Sonuç: Swiper bileşeni, sayfada düzgün bir şekilde çalışacak ve kullanıcılar slaytlar arasında geçiş yapabilecektir.
Ekstra İpuçları:
Partial Views: Eğer Swiper'ı birden fazla sayfada kullanacaksanız, Swiper'ı bir partial view olarak ayırmak iyi bir fikir olabilir.
Dinamik İçerik: Slaytların içeriğini dinamik olarak veritabanından çekmek isterseniz, HomeController'da verileri alıp Index.cshtml'e aktarabilirsiniz.
Gelişmiş Özellikler: Swiper kütüphanesinin çok sayıda özelliği vardır. Otomatik oynatma, yatay/dikey kaydırma gibi özellikler eklemek için Swiper dokümantasyonuna göz atabilirsiniz.
Bu şekilde, ASP.NET Core MVC içinde Swiper'ı profesyonel bir şekilde entegre etmiş oldunuz.