Slick Page Transitions
Ajax Page Transitions with Swup
Replace full page refreshes with Ajax-powered, stylized page transitions (an alternative to Turbo).
composer require symfony/ux-swup
// ... use statements hidden - click to show
class SwupController extends AbstractController
{
private const int PER_PAGE = 4;
#[Route('/swup/{page<\d+>}', name: 'app_swup')]
public function __invoke(UxPackageRepository $packageRepository, int $page = 1): Response
{
$package = $packageRepository->find('swup');
$packages = $packageRepository->findAll();
$pages = ceil(\count($packages) / self::PER_PAGE);
if ($page < 1 || $page > $pages) {
throw $this->createNotFoundException('Page not found');
}
$results = \array_slice($packages, ($page - 1) * self::PER_PAGE, self::PER_PAGE);
return $this->render('ux_packages/swup.html.twig', [
'package' => $package,
'results' => $results,
'page' => $page,
'pages' => $pages,
]);
}
}
{% extends 'base.html.twig' %}
{% block body %}
<div data-controller="symfony--ux-swup--swup" id="swup" data-turbo="false">
<div class="PackageList">
{% for package in results %}
{{ include('components/Package/PackageListItem.html.twig', {package}) }}
{% endfor %}
</div>
<div class="mt-3">
<nav class="Pagination">
{% for num in 1..pages %}
<a href="{{ path('app_swup', num > 1 ? {page: num} : {}) }}"
aria-current="{{ page == num ? 'true' : 'false' }}">
{{ num }}
</a>
{% endfor %}
</nav>
</div>
</div>
{% endblock %}
UX Swup
Ajax-powered page navigation
URL in address bar changes
Customizable transitions
Install It
$ composer require symfony/ux-swup