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 Bootstrap 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.
Bootstrap’ı projeye dahil etmek için, _Layout.cshtml dosyasına Bootstrap’ın CSS ve JS dosyalarını eklemelisiniz. Bootstrap'ı CDN üzerinden kolayca dahil edebilirsiniz.
_Layout.cshtml dosyasını açın ve aşağıdaki Bootstrap bağlantılarını ekleyin.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - ASP.NET Core MVC</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/css/site.css" rel="stylesheet" />
</head>
<body>
<header>
<!-- Menü veya başlık kısmı -->
</header>
<div class="container">
@RenderBody()
</div>
<footer>
<!-- Alt bilgi kısmı -->
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js"></script>
</body>
Şimdi Home/Index.cshtml dosyasına Bootstrap carousel bileşenini ekleyeceğiz.
@{
ViewData["Title"] = "Bootstrap Carousel Demo";
}
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
@for (int i = 1; i <= 10; i++)
{
<div class="carousel-item @(i == 1 ? "active" : "")">
<img src="https://via.placeholder.com/800x400?text=Slide+@i" class="d-block w-100" alt="Slide @i">
<div class="carousel-caption d-none d-md-block">
<h5>Slide @i</h5>
<p>This is slide number @i</p>
</div>
</div>
}
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
carousel-inner: Bu sınıf, tüm slaytları barındırır. Her bir slayt, carousel-item içinde tanımlanır.
active sınıfı, ilk slaytın görünür olmasını sağlar.
carousel-control-prev ve carousel-control-next sınıfları, önceki ve sonraki slaytlar arasında geçiş yapmanızı sağlayan düğmelerdir.
data-bs-ride="carousel" özelliği, kaydırıcıyı otomatik olarak başlatmak için kullanılır (isteğe bağlıdır).
Her bir slayt için, örneğin via.placeholder.com kullanarak basit bir resim ekledim. Gerçek resimleri kullanarak değiştirebilirsiniz.
Bootstrap, JavaScript ve Popper.js gerektirir, bu nedenle _Layout.cshtml dosyasına eklediğimiz Bootstrap JS ve Popper.js bağlantılarının doğru olduğundan emin olun.
İçeriği dinamik hale getirmek isterseniz, HomeController dosyasını da güncelleyebilirsiniz, ancak bu örnekte statik içerik kullanıyoruz.
using Microsoft.AspNetCore.Mvc;
namespace Temrinler11HCore.Controllers.Web
{
public class Uyg6wController : Controller
{
public IActionResult Index()
{
return View("~/Views/Web/Uyg6w/Index.cshtml");
}
}
}
Visual Studio'da F5 tuşuna basarak veya Debug > Start Debugging menüsünü kullanarak projeyi çalıştırabilirsiniz.
Artık bir Bootstrap Carousel (kaydırıcı) bileşeniyle modern bir kaydırıcıya sahip oldunuz. Slaytlar arasındaki geçişler, Bootstrap’ın yerleşik özellikleri sayesinde oldukça basit bir şekilde yapılmıştır.
Ekstra Özellikler:
Otomatik geçiş: data-bs-ride="carousel" özelliğiyle otomatik olarak slaytlar arasında geçiş yapabilirsiniz.
Dinamik içerik: Slaytların içeriğini dinamik olarak veritabanından almak isterseniz, Uyg6wController'da gerekli verileri model olarak aktarabilirsiniz.
Responsive tasarım: Bootstrap, mobil cihazlarda da uyumlu olduğundan, kaydırıcı mobil cihazlarda da düzgün çalışacaktır.
Bu şekilde, Bootstrap kullanarak profesyonel bir kaydırıcı (carousel) uygulaması oluşturmuş olduk.