<?xml version="1.0" encoding="utf-8"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
	<channel>
		<atom:link href="https://gebher.com/blog/x5feed.php" rel="self" type="application/rss+xml" />
		<title><![CDATA[Blog: Insights and Inspiration]]></title>
		<link>https://gebher.com/blog/</link>
		<description><![CDATA[Read the latest news, data, insights, inspirations. Find the latest news tips and guides to make the most of your templates, reviews and codes for WebSite X5.]]></description>
		<language>EN</language>
		<lastBuildDate>Tue, 30 May 2023 08:50:00 +0000</lastBuildDate>
		<item>
			<title><![CDATA[WebSite X5 Pro 2023.2: What's New That Will Transform Your Website Building Experience]]></title>
			<author><![CDATA[Gebher Editorial Board]]></author>
			<category domain="https://gebher.com/blog/index.php?category=WebSite_X5_News"><![CDATA[WebSite X5 News]]></category>
			<category>imblog</category>
			<description><![CDATA[<div id="imBlogPost_00000005B"><div><div class="article text-component"><h3 class="hash-link imHeading3">Incomedia presented the new version of WebSite X5 Pro (v2023.2)</h3><p>The world of web design is constantly evolving and website building platforms must adapt to the ever-growing needs of users. In this context, <mark>WebSite X5 Pro</mark> is confirmed as a <mark>cutting-edge solution</mark>, offering new features in its <mark>latest version, 2023.2</mark>. In this article, we'll explore the new features that make WebSite X5 Pro an excellent choice for creating quality, professional websites.</p></div><br><br><div class="article text-component"><h3 class="hash-link imHeading3">What are the new features?</h3></div><br><article class="article text-component"><p class="text-md color-contrast-low" style="display:none">Changelog</p><ol class="list list--ol"><li><strong>Spell Checker</strong>: Introduction of the spell checker in the text editor to ensure the perfection of your texts. An error-free text is a sign of quality and professionalism. From now on, it will be easier for you to check that nothing escapes;</li><li><strong>MagicText</strong>: Revolutionary assistant based on Artificial Intelligence (AI) for text generation. With MagicText, you can easily create any type of content for your website: titles, SEO titles, paragraphs, ideas and tags. Just make a request and you will see the texts take shape before your eyes. It's truly magical!</li></ol></article><br><br><br><div class="article text-component"><h3 class="hash-link imHeading3">Let's make a summary.</h3><p>WebSite X5 Pro 2023.2 is confirmed as an excellent choice for users who want to create professional and quality websites. With the introduction of the spell checker and MagicText, this platform is committed to offering tools that simplify the content creation process and improve communication with visitors. It doesn't matter if you are a web design pro or a beginner, WebSite X5 Pro provides you with the features you need to achieve extraordinary results. Explore the new features of WebSite X5 Pro 2023.2 and find out how you can improve your website with ease and style.</p><br><figure class="text-component__block text-component__block--outset"><img class="radius-lg" src="https://www.gebher.com/blog/files/website-x5-pro-v2023.2-magictext.jpg" alt="MagicText: a new way to write content"><figcaption>Resource: The source of the image is a preview of the WebSite X5 Pro program showing spelling correction and MagicText.</figcaption></figure><p><strong>Spell Checker:</strong> Perfection in every word An impeccable text is essential to communicate professionalism and seriousness. With the introduction of the spell checker in WebSite X5 Pro's text editor, users can ensure that their content is free from spelling errors. Now, checking for typos becomes easier than ever, allowing users to correct texts directly in the editor and ensure that every word is spelled correctly. WebSite X5 Pro's spell checker is an invaluable tool for maintaining the quality of content and impressing visitors with impeccable communication.</p><br><p><strong>MagicText:</strong> The magic of Artificial Intelligence at your service One of the most innovative features introduced in WebSite X5 Pro 2023.2 is MagicText. This Artificial Intelligence (AI) powered assistant will change the way you create content for your website. MagicText is able to generate texts automatically, whether you need to write headings, SEO titles, paragraphs, ideas or tags. All you have to do is ask, and the texts will magically compose before your eyes.</p><br><p>The power of MagicText lies in its ability to use artificial intelligence to generate high quality and relevant content. This feature will not only help you save valuable time writing texts, but will also provide you with creative and relevant suggestions to improve your online communication. With MagicText, you'll be able to create engaging and effective content, without having to deal with writer's block or wasting time searching for the right words.</p></div><br><br><br><div class="article text-component"><h3 class="hash-link imHeading3">Our sincere opinion about this release.</h3><p>The new version of WebSite X5 Pro, 2023.2, has been launched with a series of new features that will make the creation of websites even more intuitive and effective. Among these, two features stand out for their impact on the quality and efficiency of the content creation process: the spell checker and MagicText.</p><br><p>The spell checker integrated in the text editor of WebSite X5 Pro is a valuable tool for ensuring the correctness of the contents. Text free of spelling errors is a sign of professionalism and attention to detail, elements that can make all the difference in impressing your website visitors. Thanks to this feature, you will be able to correct mistakes directly in the text editor, saving time and ensuring that every word is spelled accurately.</p><br><p>But the real novelty that deserves to be underlined is MagicText. This AI powered assistant will revolutionize the way you create content for your website. MagicText is able to generate texts automatically, covering a wide range of needs, such as writing titles, SEO titles, paragraphs, ideas and tags. Just make a request and the texts will be composed before your eyes, as if by magic.</p><br><p>Thanks to artificial intelligence, MagicText is able to deliver high-quality and relevant content. This tool not only helps you save time writing texts, but also provides you with creative and relevant suggestions to improve your online communication. You can let the assistant guide you in choosing the right words, overcoming creative blocks and achieving surprising results.</p><br><p>Whether you are a professional web designer or a beginner, WebSite X5 Pro 2023.2 offers you the ability to create quality content with ease. The spell checker allows you to avoid typos and embarrassing mistakes, while MagicText offers you a virtual assistant for generating intelligent texts. These new features integrate seamlessly into the WebSite X5 Pro editor, making the process of creating and editing content even more fluid and rewarding.</p><br><p>With the new version of WebSite X5 Pro, you'll have a complete set of tools at your disposal to create a successful website. The spell checker and MagicText represent a significant step forward in improving the quality of content and the efficiency of the creative process. Don't miss the opportunity to take advantage of these new features and create a professional, attractive and error-free website, thanks to WebSite X5 Pro 2023.2.</p><br><p>In addition to the exciting news, it is also important to evaluate the positive and negative aspects of the new version of WebSite X5 Pro, the 2023.2. So let's see a balanced overview of the features of this release.</p><br><p>The new version of WebSite X5 Pro, 2023.2, offers significant improvements and innovative features that simplify content creation and improve the overall quality of the website. However, it is important to weigh your specific needs carefully and consider the positives and negatives before deciding if this version is right for your needs.</p></div><br><br><br><article class="article text-component"><p class="text-md color-contrast-low">Positive aspects</p><br><ol class="list list--ol"><li><strong>Spell Checker:</strong> The integration of a spell checker into the WebSite X5 Pro text editor is a great advantage. It allows you to <mark>check and correct spelling errors directly in the editor</mark>, ensuring that your content is flawless and professional;</li><li><strong>MagicText:</strong> The introduction of MagicText, an AI-based <mark>assistant for text generation</mark>, is a remarkable innovation. This feature offers creative suggestions and helps overcome any creative blocks, making it easier to write headings, paragraphs, tags and more. MagicText can be an extremely useful tool for speeding up the content creation process;</li><li><strong>Time saving:</strong> Thanks to MagicText and the spelling checker, WebSite X5 Pro 2023.2 offers features that <mark>save you valuable time in creating and reviewing content</mark>. This is especially beneficial for those who manage multiple websites or have tight deadlines to meet.</li></ol></article><br><article class="article text-component"><p class="text-md color-contrast-low">Negative aspects</p><br><ol class="list list--ol"><li><strong>Limited to WebSite X5 Pro:</strong> It is important to note that some of the new features, such as MagicText, are <mark>only available in the Pro version</mark> of WebSite X5. Users of lower versions may feel excluded from these advanced features unless they decide to upgrade to the Pro version;</li><li><strong>Addiction to AI:</strong> While the integration of Artificial Intelligence may be a boon for many users, some may prefer a more traditional approach to content writing. MagicText can simplify the process, but some people may <mark>prefer the freedom to express their creativity without the interference of a virtual assistant</mark>;</li><li><strong>Possible language limitations:</strong> The functionality of the spell checker and MagicText may be <mark>limited to certain languages</mark> or may not be as effective in all supported languages. Users working with less common or specific languages may not get the same benefits as those working with more widely used languages.</li></ol></article><br><br><br><div class="article text-component"><h3 class="hash-link imHeading3">It is advisable to update or buy this new version?</h3><p>If you are a WebSite X5 user and you are considering upgrading your license or purchasing the Pro version, there are several reasons to consider this decision.</p><p>The Pro version of WebSite X5 offers a significant increase in functionality compared to the basic version. Among the numerous advanced features available in the Pro version, two examples are the spell checker and MagicText. These features allow you to create even more professional and eye-catching websites.</p><br><p>The new features of the Pro version, such as the spell checker and MagicText, increase your productivity in content creation. The spell checker quickly finds and corrects spelling errors, ensuring flawless text. MagicText provides creative and intelligent suggestions for text generation, offering ideas and saving you from the impasse of blank paper. These advanced features help you be more productive and focus on other key aspects of your project.</p><br><p>The Pro version of WebSite X5 provides you with the tools you need to create a high-quality user experience on your website. The spell checker avoids typos and embarrassing mistakes, while MagicText allows you to generate engaging and creative texts. This helps to differentiate your website from the competition and create a professional and trustworthy image for your business.</p><br><p>By upgrading to the Pro version, you will also receive a higher level of technical support from the WebSite X5 team. Plus, you'll have access to regular updates and new features introduced to the software over time. By keeping your license up to date, you will be able to stay up to date with the latest trends in web design and take full advantage of WebSite X5's potential.</p></div><br><section class="bg-light radius-lg inner-glow shadow-sm shadow-ring overflow-hidden padding-md"><div class="grid gap-md items-center"><div class="col-6@md"><div class="padding-left-md@lg"><div class="text-component"><h1 class="text-xl">Get Latest WebSite X5 Version Now!</h1><p class="color-contrast-medium">Don't miss the opportunity to improve your productivity and your online presence. Buy the WebSite X5 Pro or Evo license now with a 25% discount and start creating professional websites without limits.</p></div><div class="margin-top-sm"><div class="flex flex-wrap gap-sm items-center"><a href="../promo.php#websitex5_pro" class="btn btn--primary">Update Now</a> <a href="https://www.gebher.com/website-x5-pro-design.php#websitex5_pro" class="link color-contrast-higher">View Discount Code</a></div></div></div></div><div class="col-6@md"><figure class="width-100%"><img class="block width-100% radius-md" src="../../assets/img/cta-banner-img-wsx5.jpg" alt="WebSite X5 Software"></figure></div></div></section><br></div></div>]]></description>
			<pubDate>Tue, 30 May 2023 08:50:00 GMT</pubDate>
			<enclosure url="https://gebher.com/blog/files/website-x5-pro-2023v2-innovations-transform-website-creation-experience-magictext-spell-checker_thumb.jpg" length="359077" type="image/jpeg" />
			<link>https://gebher.com/blog/?website-x5-pro-2023v2-innovations-transform-website-creation-experience-magictext-spell-checker</link>
			<guid isPermaLink="false">https://gebher.com/blog/rss/00000005B</guid>
		</item>
		<item>
			<title><![CDATA[Client Testimonials Carousel for WebSite X5: A handy slideshow where you can display customer reviews!]]></title>
			<author><![CDATA[Gebher Editorial Board]]></author>
			<category domain="https://gebher.com/blog/index.php?category=Code_Nuggets"><![CDATA[Code Nuggets]]></category>
			<category>imblog</category>
			<description><![CDATA[<div id="imBlogPost_000000042"><div><!-- Article Text --><div class="article text-component"><p>In this guide we want to help you create a small optional object, completely free, inspired by a code created by <strong>Quelli del Cucuzzolo</strong> <a target="_blank" rel="noopener noreferrer" href="https://gebher.com/quick/?link=ds9eaaLEG2U2" class="outsource"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>, an article which we advise you to read to have a better understanding of this object.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>Our guide wants to be an update to the previously proposed code to solve any compatibility problems with the latest PHP versions, as well as wanting to propose a more modern graphic style.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>The <mark>Client Testimonials Carousel</mark> code is written in PHP language which allows you to retrieve user comments stored in a database, select them based on certain options, and display them on a web page, such as the Home Page of our site. The code was written to automate the process of selecting and displaying user comments, which has become common practice for websites in many niches, such as those dedicated to ecommerce.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>The logic of the code exploits the structure that sites managed with WebSite X5 generate autonomously, when a Comments object is inserted and managed via the database. From this point of view it will be necessary to set up a database and know its parameters.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>To use the code, you need to set some initial variables, including the name of the database table that contains user comments and the guestbook ID, which is the identifier of the guestbook that contains user comments. In addition, you must specify database connection information, including hostname, user name, password, and database name.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>To bypass any changes on the software side, we have opted to use a new connection to the database, without using the one automatically managed by WebSite X5, precisely to avoid possible conflicts and obsolescence of the code.</p></div><!-- Article Text --><div class="article text-component"><p>After establishing a connection to the database, the code selects user comments based on the guestbook ID and some specified options, such as comment numbers 0, 2 and 4, sorted according to a certain criterion. Next, the code uses a while loop to iterate through the query results and build the HTML structure to display user comments.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>The HTML structure comprises a bulleted list of slideshow elements, each of which represents a single comment. Each element contains a picture of the user's avatar, the user's name, the date of the comment, the text of the comment and possibly a link to the user's website and a numerical rating.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>Basically, the intent is to be able to similarly report the data entered in the comment form by the user.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>For an HTML structure that is as modern and versatile as possible on the mobile side, but also graphically beautiful to look at, we decided to base ourselves on the free framework provided by our partner <strong>CodyHouse</strong> <a target="_blank" rel="noopener noreferrer" href="https://gebher.com/quick/?link=9Davl5sFZCZ2ZX46TpuOKKoQDfdjm63sGF3zxh8Tj8jKYhp9Yn" class="outsource"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>, using the library and the Free codes made available.</p></div><!-- Article Text --><div class="article text-component"><p>The Client Testimonials Carousel is the perfect plugin to integrate into WebSite X5, within an HTML Code object, in a PHP page.</p><br><br><p>Here is the PHP code:</p></div><!-- Article Text --><br><br><!-- Coding Board --><div class="code-highlight"><div class="code-header margin-bottom-xs" style="text-align: right"><span class="file-name margin-bottom-md padding-sm padding-md@lg">PHP</span> <button class="copy-button btn btn--sm btn--black radius-full"><svg stroke="currentColor" fill="none" stroke-width="2" viewbox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>&nbsp;Copy Code</button></div><pre class="code-snippet"><code class="language-javascript"><blockquote><ol><li><font color="#000000">&lt;?php</font></li><li><font color="#666666">//&nbsp;Definition&nbsp;of&nbsp;the&nbsp;initial&nbsp;variables&nbsp;to&nbsp;customize</font></li><li><font color="#000088">&dollar;tableName</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#0000ff">&quot;w5_qwerty01_2345_67_comments&quot;</font><font color="#339933">;</font>&nbsp;<font color="#666666">//&nbsp;enter&nbsp;the&nbsp;name&nbsp;of&nbsp;the&nbsp;database&nbsp;table&nbsp;</font></li><li><font color="#000088">&dollar;guestbookId</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#0000ff">&quot;x5ab01234&quot;</font><font color="#339933">;</font>&nbsp;<font color="#666666">//&nbsp;Enter&nbsp;the&nbsp;guestbook&nbsp;ID</font></li><li>&nbsp;</li><li><font color="#666666">//&nbsp;Database&nbsp;connection&nbsp;information</font></li><li><font color="#000088">&dollar;hostname</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#0000ff">&quot;localhost&quot;</font><font color="#339933">;</font>&nbsp;<font color="#666666">//&nbsp;Database&nbsp;hostname</font></li><li><font color="#000088">&dollar;username</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#0000ff">&quot;localhost&quot;</font><font color="#339933">;</font>&nbsp;<font color="#666666">//&nbsp;Database&nbsp;username</font></li><li><font color="#000088">&dollar;password</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#0000ff">&quot;localhost&quot;</font><font color="#339933">;</font>&nbsp;<font color="#666666">//&nbsp;Database&nbsp;password</font></li><li><font color="#000088">&dollar;databaseName</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#0000ff">&quot;localhost&quot;</font><font color="#339933">;</font>&nbsp;<font color="#666666">//&nbsp;Database&nbsp;name</font></li><li>&nbsp;</li><li><font color="#666666">//&nbsp;Database&nbsp;connection</font></li><li><font color="#000088">&dollar;connection</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#990000">mysqli_connect</font><font color="#009900">&#40;</font><font color="#000088">&dollar;hostname</font><font color="#339933">,</font>&nbsp;<font color="#000088">&dollar;username</font><font color="#339933">,</font>&nbsp;<font color="#000088">&dollar;password</font><font color="#339933">,</font>&nbsp;<font color="#000088">&dollar;databaseName</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>&nbsp;</li><li><font color="#666666">//&nbsp;Checking&nbsp;for&nbsp;successful&nbsp;connection</font></li><li><font color="#b1b100">if</font>&nbsp;<font color="#009900">&#40;</font><font color="#339933">!</font><font color="#000088">&dollar;connection</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#990000">die</font><font color="#009900">&#40;</font><font color="#0000ff">&quot;Failed&nbsp;to&nbsp;connect:&nbsp;&quot;</font>&nbsp;<font color="#339933">.</font>&nbsp;<font color="#990000">mysqli_connect_error</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li><font color="#009900">&#125;</font></li><li>&nbsp;</li><li><font color="#666666">//&nbsp;ATTENTION:&nbsp;SELECT&nbsp;ONLY&nbsp;ONE&nbsp;OPERATING&nbsp;MODE&nbsp;(Mode&nbsp;1&nbsp;or&nbsp;Mode&nbsp;2)&nbsp;and&nbsp;enter&nbsp;'//'&nbsp;to&nbsp;disable&nbsp;the&nbsp;unchosen&nbsp;option.</font></li><li>&nbsp;</li><li><font color="#666666">//&nbsp;MODE&nbsp;1:&nbsp;Selection&nbsp;of&nbsp;chosen&nbsp;comments</font></li><li><font color="#000088">&dollar;sql</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#0000ff">&quot;SELECT&nbsp;*&nbsp;FROM&nbsp;<font color="#006699">&dollar;tableName</font>&nbsp;WHERE&nbsp;postid='<font color="#006699">&dollar;guestbookId</font>'&nbsp;AND&nbsp;commentid&nbsp;in(0,2,4)&nbsp;ORDER&nbsp;BY&nbsp;FIELD(commentid,2,4,0)&quot;</font><font color="#339933">;</font></li><li>&nbsp;</li><li><font color="#666666">//&nbsp;MODE&nbsp;2:&nbsp;Selection&nbsp;of&nbsp;random&nbsp;comments&nbsp;based&nbsp;on&nbsp;rating</font></li><li><font color="#666666">//&dollar;sql&nbsp;=&nbsp;&quot;SELECT&nbsp;*&nbsp;FROM&nbsp;&dollar;tableName&nbsp;WHERE&nbsp;postid='&dollar;guestbookId'&nbsp;AND&nbsp;rating=5&nbsp;ORDER&nbsp;BY&nbsp;RAND()&nbsp;LIMIT&nbsp;3&quot;;</font></li><li>&nbsp;</li><li><font color="#000088">&dollar;result</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#990000">mysqli_query</font><font color="#009900">&#40;</font><font color="#000088">&dollar;connection</font><font color="#339933">,</font>&nbsp;<font color="#000088">&dollar;sql</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>&nbsp;</li><li><font color="#666666">//&nbsp;Iterating&nbsp;the&nbsp;array&nbsp;and&nbsp;building&nbsp;the&nbsp;HTML&nbsp;structure</font></li><li><font color="#b1b100">if</font>&nbsp;<font color="#009900">&#40;</font><font color="#990000">mysqli_num_rows</font><font color="#009900">&#40;</font><font color="#000088">&dollar;result</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">&gt;</font>&nbsp;<font color="#cc66cc">0</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#b1b100">while</font><font color="#009900">&#40;</font><font color="#000088">&dollar;row</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#990000">mysqli_fetch_assoc</font><font color="#009900">&#40;</font><font color="#000088">&dollar;result</font><font color="#009900">&#41;</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#b1b100">echo</font>&nbsp;<font color="#0000ff">'&lt;li&nbsp;class=&quot;slideshow__item&nbsp;sq7-bg-light&nbsp;js-slideshow__item&quot;&nbsp;style=&quot;&quot;&gt;&lt;div&nbsp;class=&quot;sq7-container&nbsp;sq7-max-width-sm&quot;&gt;&lt;div&nbsp;class=&quot;sq7-text-component&quot;&gt;'</font><font color="#339933">;</font></li><li>&nbsp;</li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#666666">//&nbsp;Avatar&nbsp;output&nbsp;image</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#b1b100">echo</font>&nbsp;<font color="#0000ff">'&lt;img&nbsp;class=&quot;gb_avatar&quot;&nbsp;src=&quot;files/avatar.svg&quot;&nbsp;alt=&quot;avatar&quot;&nbsp;style=&quot;height:&nbsp;80px;&nbsp;max-width:&nbsp;80px;&nbsp;max-height:&nbsp;80px;&nbsp;width:&nbsp;80px;&quot;/&gt;'</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#666666">//&nbsp;Name&nbsp;output</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#b1b100">echo</font>&nbsp;<font color="#0000ff">'&lt;div&nbsp;style=&quot;&nbsp;text-align:&nbsp;center;&nbsp;&quot;&nbsp;class=&quot;gb_name&quot;&gt;&lt;strong&gt;'</font>&nbsp;<font color="#339933">.</font>&nbsp;<font color="#000088">&dollar;row</font><font color="#009900">&#91;</font><font color="#0000ff">'name'</font><font color="#009900">&#93;</font>&nbsp;<font color="#339933">.</font>&nbsp;<font color="#0000ff">'&lt;/strong&gt;&lt;/div&gt;'</font><font color="#339933">;</font></li><li>&nbsp;</li><li><font color="#666666">//&nbsp;Date&nbsp;output</font></li><li><font color="#000088">&dollar;date</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#990000">date_create</font><font color="#009900">&#40;</font><font color="#000088">&dollar;row</font><font color="#009900">&#91;</font><font color="#0000ff">'timestamp'</font><font color="#009900">&#93;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li><font color="#b1b100">echo</font>&nbsp;<font color="#0000ff">'&lt;p&nbsp;style=&quot;&nbsp;text-align:&nbsp;center;&nbsp;&quot;&gt;'</font>&nbsp;<font color="#339933">.</font>&nbsp;<font color="#990000">date_format</font><font color="#009900">&#40;</font><font color="#000088">&dollar;date</font><font color="#339933">,</font>&nbsp;<font color="#0000ff">'d-m-Y'</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">.</font>&nbsp;<font color="#0000ff">'&lt;/p&gt;'</font><font color="#339933">;</font></li><li>&nbsp;</li><li><font color="#666666">//&nbsp;Comment&nbsp;output</font></li><li><font color="#b1b100">echo</font>&nbsp;<font color="#0000ff">'&lt;div&nbsp;style=&quot;&nbsp;text-align:&nbsp;center;&nbsp;&quot;&nbsp;class=&quot;gb_body&quot;&gt;'</font>&nbsp;<font color="#339933">.</font>&nbsp;<font color="#000088">&dollar;row</font><font color="#009900">&#91;</font><font color="#0000ff">'body'</font><font color="#009900">&#93;</font>&nbsp;<font color="#339933">.</font>&nbsp;<font color="#0000ff">'&lt;/div&gt;'</font><font color="#339933">;</font></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#b1b100">if</font>&nbsp;<font color="#009900">&#40;</font><font color="#000088">&dollar;row</font><font color="#009900">&#91;</font><font color="#0000ff">'url'</font><font color="#009900">&#93;</font>&nbsp;<font color="#339933">!=</font>&nbsp;<font color="#0000ff">''</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#666666">//&nbsp;Output&nbsp;of&nbsp;the&nbsp;website&nbsp;field</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#b1b100">echo</font>&nbsp;<font color="#0000ff">'&lt;div&nbsp;class=&quot;gb_url&quot;&gt;&lt;a&nbsp;class=&quot;imCssLink&quot;&nbsp;href=&quot;'</font>&nbsp;<font color="#339933">.</font>&nbsp;<font color="#000088">&dollar;row</font><font color="#009900">&#91;</font><font color="#0000ff">'url'</font><font color="#009900">&#93;</font>&nbsp;<font color="#339933">.</font>&nbsp;<font color="#0000ff">'&quot;&nbsp;target=&quot;_blank&quot;&gt;sito&nbsp;web&lt;/a&gt;&lt;/div&gt;'</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#666666">//&nbsp;Output&nbsp;of&nbsp;the&nbsp;custom&nbsp;website&nbsp;field</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#b1b100">echo</font>&nbsp;<font color="#0000ff">'&lt;div&nbsp;class=&quot;gb_url&quot;&gt;'</font>&nbsp;<font color="#339933">.</font>&nbsp;<font color="#990000">str_replace</font><font color="#009900">&#40;</font><font color="#0000ff">'http://'</font><font color="#339933">,</font>&nbsp;<font color="#0000ff">''</font><font color="#339933">,</font>&nbsp;<font color="#000088">&dollar;row</font><font color="#009900">&#91;</font><font color="#0000ff">'url'</font><font color="#009900">&#93;</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">.</font>&nbsp;<font color="#0000ff">'&lt;/div&gt;'</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">&#125;</font></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#666666">//&nbsp;Output&nbsp;del&nbsp;voto</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#b1b100">if</font>&nbsp;<font color="#009900">&#40;</font><font color="#990000">isset</font><font color="#009900">&#40;</font><font color="#000088">&dollar;row</font><font color="#009900">&#91;</font><font color="#0000ff">'rating'</font><font color="#009900">&#93;</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">&amp;&amp;</font>&nbsp;<font color="#000088">&dollar;row</font><font color="#009900">&#91;</font><font color="#0000ff">'rating'</font><font color="#009900">&#93;</font>&nbsp;<font color="#339933">&gt;</font>&nbsp;<font color="#cc66cc">0</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#b1b100">echo</font>&nbsp;<font color="#0000ff">'&lt;img&nbsp;class=&quot;gb_rater&quot;&nbsp;src=&quot;files/star'</font>&nbsp;<font color="#339933">.</font>&nbsp;<font color="#000088">&dollar;row</font><font color="#009900">&#91;</font><font color="#0000ff">'rating'</font><font color="#009900">&#93;</font>&nbsp;<font color="#339933">.</font>&nbsp;<font color="#0000ff">'.svg&quot;&nbsp;alt=&quot;'</font>&nbsp;<font color="#339933">.</font>&nbsp;<font color="#000088">&dollar;row</font><font color="#009900">&#91;</font><font color="#0000ff">'rating'</font><font color="#009900">&#93;</font>&nbsp;<font color="#339933">.</font>&nbsp;<font color="#0000ff">'&nbsp;star&quot;&nbsp;style=&quot;max-width:&nbsp;150px;max-height:&nbsp;150px;width:&nbsp;150px;&quot;/&gt;'</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">&#125;</font></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#b1b100">echo</font>&nbsp;<font color="#0000ff">'&lt;/div&gt;&lt;/div&gt;&lt;/li&gt;'</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">&#125;</font></li><li><font color="#009900">&#125;</font></li><li>&nbsp;</li><li><font color="#666666">//&nbsp;Closing&nbsp;the&nbsp;database&nbsp;connection</font></li><li><font color="#990000">mysqli_close</font><font color="#009900">&#40;</font><font color="#000088">&dollar;connection</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li><font color="#000000">?&gt;</font></li></ol></blockquote></code></pre></div><!-- Coding Board --><br><br><!-- Article Text --><div class="article text-component"><p>As mentioned earlier, in this PHP code, we have a script that fetches customer testimonials from a database table and displays them on a web page. Let's examine the code in more detail.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>First, we have some initial variables that need to be customized based on our database and guestbook settings. The <code>&dollar;tableNamevariable</code> should be set to the name of the database table storing the comments, while the <code>&dollar;guestbookIdvariable</code> should be set to the ID of the guestbook we want to retrieve the comments from.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>Next, we have the database connection information, including hostname, username, password, and database name. These details are used to establish a database connection.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>We then use the <code>mysqli_connect()</code> function to connect to the database. If the connection fails, the script will terminate with an error message.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>After establishing the database connection, we run a SQL query to retrieve the desired comments from the specified table. The query selects all rows from the table where the <code>postid</code> column matches the guestbook ID and the <code>commentid</code> column is one of 0, 2, or 4. The results are sorted in the order specified by the <code>FIELD()</code> function. This SQL query is stored in the <code>&dollar;sql</code> variable.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>The <code>mysqli_query()</code> function is used to execute the SQL query, and the results are stored in the <code>&dollar;result</code> variable.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>We then iterate over the rows in the result set using a <code>while</code> loop. For each row, we generate the HTML code to display the comment on the web page. The HTML code is stored in a string and printed to the output stream using the <code>echo</code> statement.</p></div><!-- Article Text --><!-- Article Text --><br><br><br><!-- Article Text --><div class="article text-component"><p>The HTML code includes the following elements for each comment:</p></div><!-- Article Text --><br><!-- Number List Start --><article class="article text-component"><p class="text-md color-contrast-low" style="display:none">Steps</p><ol class="list list--ol"><li>An avatar image, which is hardcoded in this example but could be replaced with an image uploaded by the user.</li><li>The commenter's name, retrieved from the <code>name</code> column of the database table.</li><li>The date the comment was posted, retrieved from the <code>timestamp</code> column of the database table.</li><li>The comment text, retrieved from the <code>body</code> column of the database table.</li><li>A link to the commenter's website, if provided in the <code>url</code> column of the database table.</li><li>A star rating, if provided in the <code>rating</code> column of the database table.</li></ol></article><!-- Number List End --><br><br><br><br><!-- Article Text --><!-- Article Text --><div class="article text-component"><p>Finally, we close the database connection using the <code>mysqli_close()</code> function.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>Overall, this script provides an easy way to retrieve and display customer testimonials on a web page, using a database to manage the comments. The script could be further customized to add features like pagination, filtering or sorting by different criteria.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>Now let's take care of the visual part, that is organizing the data taken from the database with a Carousel. To do this we have to think of the structure as if it were a sandwich, where the PHP code is the condiment, while the opening and closing HTML structure can similarly be the two slices of bread that enclose our delicacy</p><br><br><p>And here is the complete code:</p></div><!-- Article Text --><br><br><!-- Coding Board --><div class="code-highlight"><div class="code-header margin-bottom-xs" style="text-align: right"><span class="file-name margin-bottom-md padding-sm padding-md@lg">HTML</span> <button class="copy-button btn btn--sm btn--black radius-full"><svg stroke="currentColor" fill="none" stroke-width="2" viewbox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>&nbsp;Copy Code</button></div><pre class="code-snippet"><code class="language-javascript"><blockquote><ol><li><font color="#009900">&lt;<font color="#000000">link</font>&nbsp;<font color="#000066">rel</font><font color="#66cc66">=</font><font color="#ff0000">&quot;stylesheet&quot;</font>&nbsp;<font color="#000066">href</font><font color="#66cc66">=</font><font color="#ff0000">&quot;./css/2_slideshow.css&quot;</font>&gt;</font></li><li><font color="#009900">&lt;<font color="#000000">div</font>&nbsp;<font color="#000066">class</font><font color="#66cc66">=</font><font color="#ff0000">&quot;slideshow&nbsp;js-slideshow&nbsp;slideshow--transition-fade&quot;</font>&nbsp;data-swipe<font color="#66cc66">=</font><font color="#ff0000">&quot;on&quot;</font>&nbsp;data-autoplay<font color="#66cc66">=</font><font color="#ff0000">&quot;on&quot;</font>&gt;</font></li><li>&nbsp;&nbsp;<font color="#009900">&lt;<font color="#000000">p</font>&nbsp;<font color="#000066">class</font><font color="#66cc66">=</font><font color="#ff0000">&quot;sq7-sr-only&quot;</font>&gt;</font>Client&nbsp;Testimonials&nbsp;Carousel<font color="#009900">&lt;<font color="#66cc66">/</font><font color="#000000">p</font>&gt;</font></li><li>&nbsp;&nbsp;<font color="#009900">&lt;<font color="#000000">ul</font>&nbsp;<font color="#000066">class</font><font color="#66cc66">=</font><font color="#ff0000">&quot;slideshow__content&quot;</font>&gt;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#808080">&lt;!--&nbsp;&nbsp;INSERT&nbsp;THE&nbsp;PHP&nbsp;CODE&nbsp;HERE&nbsp;&nbsp;--&gt;</font></li><li>&nbsp;&nbsp;<font color="#009900">&lt;<font color="#66cc66">/</font><font color="#000000">ul</font>&gt;</font></li><li>&nbsp;&nbsp;<font color="#009900">&lt;<font color="#000000">ul</font>&gt;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">&lt;<font color="#000000">li</font>&nbsp;<font color="#000066">class</font><font color="#66cc66">=</font><font color="#ff0000">&quot;slideshow__control&nbsp;js-slideshow__control&quot;</font>&gt;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">&lt;<font color="#000000">button</font>&nbsp;<font color="#000066">class</font><font color="#66cc66">=</font><font color="#ff0000">&quot;slideshow__btn&nbsp;js-tab-focus&quot;</font>&gt;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">&lt;svg&nbsp;<font color="#000066">class</font><font color="#66cc66">=</font><font color="#ff0000">&quot;sq7-icon&quot;</font>&nbsp;viewBox<font color="#66cc66">=</font><font color="#ff0000">&quot;0&nbsp;0&nbsp;32&nbsp;32&quot;</font>&gt;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">&lt;<font color="#000000">title</font>&gt;</font>Show&nbsp;previous&nbsp;slide<font color="#009900">&lt;<font color="#66cc66">/</font><font color="#000000">title</font>&gt;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">&lt;path&nbsp;d<font color="#66cc66">=</font><font color="#ff0000">&quot;M20.768,31.395L10.186,16.581c-0.248-0.348-0.248-0.814,0-1.162L20.768,0.605l1.627,1.162L12.229,16&nbsp;l10.166,14.232L20.768,31.395z&quot;</font>&gt;&lt;<font color="#66cc66">/</font>path&gt;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">&lt;<font color="#66cc66">/</font>svg&gt;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">&lt;<font color="#66cc66">/</font><font color="#000000">button</font>&gt;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">&lt;<font color="#66cc66">/</font><font color="#000000">li</font>&gt;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">&lt;<font color="#000000">li</font>&nbsp;<font color="#000066">class</font><font color="#66cc66">=</font><font color="#ff0000">&quot;slideshow__control&nbsp;js-slideshow__control&quot;</font>&gt;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">&lt;<font color="#000000">button</font>&nbsp;<font color="#000066">class</font><font color="#66cc66">=</font><font color="#ff0000">&quot;slideshow__btn&nbsp;js-tab-focus&quot;</font>&gt;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">&lt;svg&nbsp;<font color="#000066">class</font><font color="#66cc66">=</font><font color="#ff0000">&quot;sq7-icon&quot;</font>&nbsp;viewBox<font color="#66cc66">=</font><font color="#ff0000">&quot;0&nbsp;0&nbsp;32&nbsp;32&quot;</font>&gt;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">&lt;<font color="#000000">title</font>&gt;</font>Show&nbsp;next&nbsp;slide<font color="#009900">&lt;<font color="#66cc66">/</font><font color="#000000">title</font>&gt;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">&lt;path&nbsp;d<font color="#66cc66">=</font><font color="#ff0000">&quot;M11.232,31.395l-1.627-1.162L19.771,16L9.605,1.768l1.627-1.162l10.582,14.813&nbsp;c0.248,0.348,0.248,0.814,0,1.162L11.232,31.395z&quot;</font>&gt;&lt;<font color="#66cc66">/</font>path&gt;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">&lt;<font color="#66cc66">/</font>svg&gt;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">&lt;<font color="#66cc66">/</font><font color="#000000">button</font>&gt;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">&lt;<font color="#66cc66">/</font><font color="#000000">li</font>&gt;</font></li><li>&nbsp;&nbsp;<font color="#009900">&lt;<font color="#66cc66">/</font><font color="#000000">ul</font>&gt;</font></li><li><font color="#009900">&lt;<font color="#66cc66">/</font><font color="#000000">div</font>&gt;</font></li><li><font color="#009900">&lt;<font color="#000000">script</font>&nbsp;<font color="#000066">src</font><font color="#66cc66">=</font><font color="#ff0000">&quot;./js/_1_swipe-content.js&quot;</font>&gt;&lt;<font color="#66cc66">/</font><font color="#000000">script</font>&gt;</font></li><li><font color="#009900">&lt;<font color="#000000">script</font>&nbsp;<font color="#000066">src</font><font color="#66cc66">=</font><font color="#ff0000">&quot;./js/_2_slideshow.js&quot;</font>&gt;&lt;<font color="#66cc66">/</font><font color="#000000">script</font>&gt;</font></li></ol></blockquote></code></pre></div><!-- Coding Board --><br><br><!-- Coding Board --><div class="code-highlight"><div class="code-header margin-bottom-xs" style="text-align: right"><span class="file-name margin-bottom-md padding-sm padding-md@lg">CSS (2_slideshow.css)</span> <button class="copy-button btn btn--sm btn--black radius-full"><svg stroke="currentColor" fill="none" stroke-width="2" viewbox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>&nbsp;Copy Code</button></div><pre class="code-snippet"><code class="language-javascript"><blockquote><ol><li><font color="#00AA00">*,</font>&nbsp;<font color="#00AA00">*::</font><font color="#F5758F">after</font><font color="#00AA00">,</font>&nbsp;<font color="#00AA00">*::</font><font color="#F5758F">before</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">box-sizing</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">border-box</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#00AA00">*</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">font</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">inherit</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">margin</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">padding</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">border</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li>body&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">background-color</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">hsl</font><font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">,</font>&nbsp;<font>0%</font><font color="#00AA00">,</font>&nbsp;<font>100%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">font-family</font><font color="#00AA00">:</font>&nbsp;system-ui<font color="#00AA00">,</font>&nbsp;<font color="#993333">sans-serif</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">color</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">hsl</font><font color="#00AA00">&#40;</font><font color="#cc66cc">230</font><font color="#00AA00">,</font>&nbsp;<font>7%</font><font color="#00AA00">,</font>&nbsp;<font>23%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">font-size</font><font color="#00AA00">:</font>&nbsp;<font>1rem</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li>h1<font color="#00AA00">,</font>&nbsp;h2<font color="#00AA00">,</font>&nbsp;h3<font color="#00AA00">,</font>&nbsp;h4&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">line-height</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">1.2</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">color</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">hsl</font><font color="#00AA00">&#40;</font><font color="#cc66cc">230</font><font color="#00AA00">,</font>&nbsp;<font>13%</font><font color="#00AA00">,</font>&nbsp;<font>9%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">font-weight</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">700</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li>h1&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">font-size</font><font color="#00AA00">:</font>&nbsp;<font>2.0736rem</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li>h2&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">font-size</font><font color="#00AA00">:</font>&nbsp;<font>1.728rem</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li>h3&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">font-size</font><font color="#00AA00">:</font>&nbsp;<font>1.25rem</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li>h4&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">font-size</font><font color="#00AA00">:</font>&nbsp;<font>1.2rem</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li>ol<font color="#00AA00">,</font>&nbsp;ul<font color="#00AA00">,</font>&nbsp;<font color="#993333">menu</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">list-style</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">none</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#993333">button</font><font color="#00AA00">,</font>&nbsp;input<font color="#00AA00">,</font>&nbsp;textarea<font color="#00AA00">,</font>&nbsp;select&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">background-color</font><font color="#00AA00">:</font>&nbsp;<font color="#dc143c">transparent</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">border-radius</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">color</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">inherit</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">line-height</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">inherit</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;appearance<font color="#00AA00">:</font>&nbsp;<font color="#993333">none</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li>textarea&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">resize</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">vertical</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">overflow</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">auto</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">vertical-align</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">top</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li>a&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">color</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">hsl</font><font color="#00AA00">&#40;</font><font color="#cc66cc">250</font><font color="#00AA00">,</font>&nbsp;<font>84%</font><font color="#00AA00">,</font>&nbsp;<font>54%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#993333">table</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">border-collapse</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">collapse</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">border-spacing</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li>img<font color="#00AA00">,</font>&nbsp;video<font color="#00AA00">,</font>&nbsp;svg&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">display</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">block</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">max-width</font><font color="#00AA00">:</font>&nbsp;<font>100%</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#3F84D9">@media</font>&nbsp;<font color="#00AA00">&#40;</font><font color="#000000">min-width</font><font color="#00AA00">:</font>&nbsp;<font>64rem</font><font color="#00AA00">&#41;</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;body&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">font-size</font><font color="#00AA00">:</font>&nbsp;<font>1.25rem</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li>&nbsp;&nbsp;h1&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">font-size</font><font color="#00AA00">:</font>&nbsp;<font>3.051rem</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;h2&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">font-size</font><font color="#00AA00">:</font>&nbsp;<font>2.44rem</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;h3&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">font-size</font><font color="#00AA00">:</font>&nbsp;<font>1.75rem</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;h4&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">font-size</font><font color="#00AA00">:</font>&nbsp;<font>1.5625rem</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#808080">/*&nbsp;variables&nbsp;*/</font></li><li><font color="#00AA00">:</font><font color="#F5758F">root</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#808080">/*&nbsp;colors&nbsp;*/</font></li><li>&nbsp;&nbsp;<font>--sq7-color-primary-hsl</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">250</font><font color="#00AA00">,</font>&nbsp;<font>84%</font><font color="#00AA00">,</font>&nbsp;<font>54%</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font>--sq7-color-bg-hsl</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0</font><font color="#00AA00">,</font>&nbsp;<font>0%</font><font color="#00AA00">,</font>&nbsp;<font>100%</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font>--sq7-color-contrast-high-hsl</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">230</font><font color="#00AA00">,</font>&nbsp;<font>7%</font><font color="#00AA00">,</font>&nbsp;<font>23%</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font>--sq7-color-contrast-higher-hsl</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">230</font><font color="#00AA00">,</font>&nbsp;<font>13%</font><font color="#00AA00">,</font>&nbsp;<font>9%</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font>--sq7-color-bg-light-hsl</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0</font><font color="#00AA00">,</font>&nbsp;<font>0%</font><font color="#00AA00">,</font>&nbsp;<font>100%</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font>--sq7-color-black-hsl</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">230</font><font color="#00AA00">,</font>&nbsp;<font>13%</font><font color="#00AA00">,</font>&nbsp;<font>9%</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font>--sq7-color-white-hsl</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0</font><font color="#00AA00">,</font>&nbsp;<font>0%</font><font color="#00AA00">,</font>&nbsp;<font>100%</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font>--sq7-color-bg-dark-hsl</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">240</font><font color="#00AA00">,</font>&nbsp;<font>4%</font><font color="#00AA00">,</font>&nbsp;<font>95%</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font>--sq7-color-primary-darker-hsl</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">250</font><font color="#00AA00">,</font>&nbsp;<font>84%</font><font color="#00AA00">,</font>&nbsp;<font>38%</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font>--sq7-color-primary-light-hsl</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">250</font><font color="#00AA00">,</font>&nbsp;<font>84%</font><font color="#00AA00">,</font>&nbsp;<font>60%</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font>--sq7-color-accent-hsl</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">342</font><font color="#00AA00">,</font>&nbsp;<font>89%</font><font color="#00AA00">,</font>&nbsp;<font>48%</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font>--sq7-color-contrast-lower-hsl</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">240</font><font color="#00AA00">,</font>&nbsp;<font>4%</font><font color="#00AA00">,</font>&nbsp;<font>85%</font><font color="#00AA00">;</font></li><li>&nbsp;</li><li>&nbsp;&nbsp;<font color="#808080">/*&nbsp;spacing&nbsp;*/</font></li><li>&nbsp;&nbsp;<font>--sq7-space-3xs</font><font color="#00AA00">:</font>&nbsp;<font>0.25rem</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font>--sq7-space-xs</font><font color="#00AA00">:</font>&nbsp;<font>0.5rem</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font>--sq7-space-sm</font><font color="#00AA00">:</font>&nbsp;<font>0.75rem</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font>--sq7-space-md</font><font color="#00AA00">:</font>&nbsp;<font>1.25rem</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font>--sq7-space-2xs</font><font color="#00AA00">:</font>&nbsp;<font>0.375rem</font><font color="#00AA00">;</font></li><li>&nbsp;</li><li>&nbsp;&nbsp;<font color="#808080">/*&nbsp;typography&nbsp;*/</font></li><li>&nbsp;&nbsp;<font>--sq7-text-sm</font><font color="#00AA00">:</font>&nbsp;<font>0.833rem</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li>@media<font color="#00AA00">&#40;</font><font color="#000000">min-width</font><font color="#00AA00">:</font>&nbsp;<font>64rem</font><font color="#00AA00">&#41;</font><font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">:</font><font color="#F5758F">root</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#808080">/*&nbsp;spacing&nbsp;*/</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font>--sq7-space-3xs</font><font color="#00AA00">:</font>&nbsp;<font>0.375rem</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font>--sq7-space-xs</font><font color="#00AA00">:</font>&nbsp;<font>0.75rem</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font>--sq7-space-sm</font><font color="#00AA00">:</font>&nbsp;<font>1.125rem</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font>--sq7-space-md</font><font color="#00AA00">:</font>&nbsp;<font>2rem</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font>--sq7-space-2xs</font><font color="#00AA00">:</font>&nbsp;<font>0.5625rem</font><font color="#00AA00">;</font></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#808080">/*&nbsp;typography&nbsp;*/</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font>--sq7-text-sm</font><font color="#00AA00">:</font>&nbsp;<font>1rem</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#808080">/*&nbsp;buttons&nbsp;*/</font></li><li><font color="#6666ff">.sq7-btn</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">position</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">relative</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">display</font><font color="#00AA00">:</font>&nbsp;inline-flex<font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">justify-content</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">center</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">align-items</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">center</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">font-size</font><font color="#00AA00">:</font>&nbsp;<font>1em</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">white-space</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">nowrap</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">text-decoration</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">none</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">background</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">hsl</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-bg-dark-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">color</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">hsl</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-contrast-higher-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">cursor</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">pointer</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">text-decoration</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">none</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">line-height</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">1.2</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;-webkit-font-smoothing<font color="#00AA00">:</font>&nbsp;antialiased<font color="#00AA00">;</font></li><li>&nbsp;&nbsp;-moz-osx-font-smoothing<font color="#00AA00">:</font>&nbsp;<font color="#9932cc">grayscale</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">transition</font><font color="#00AA00">:</font>&nbsp;all&nbsp;<font>0.2s</font>&nbsp;ease<font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">will-change</font><font color="#00AA00">:</font>&nbsp;transform<font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">padding</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-space-2xs</font><font color="#00AA00">&#41;</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-space-sm</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">border-radius</font><font color="#00AA00">:</font>&nbsp;<font>0.25em</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-btn</font><font color="#00AA00">:</font>focus-visible&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">box-shadow</font><font color="#00AA00">:</font>&nbsp;<font>0px</font>&nbsp;<font>0px</font>&nbsp;<font>0px</font>&nbsp;<font>2px</font>&nbsp;<font color="#9932cc">hsl</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-bg-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font>0px</font>&nbsp;<font>0px</font>&nbsp;<font>0px</font>&nbsp;<font>4px</font>&nbsp;<font color="#9932cc">hsla</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-contrast-higher-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">0.15</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">outline</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">none</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-btn</font><font color="#00AA00">:</font><font color="#F5758F">active</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateY<font color="#00AA00">&#40;</font><font>2px</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-btn<font>--primary</font></font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">background</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">hsl</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-primary-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">color</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">hsl</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-white-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">box-shadow</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">inset</font>&nbsp;<font>0px</font>&nbsp;<font>1px</font>&nbsp;<font>0px</font>&nbsp;<font color="#9932cc">hsla</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-white-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">0.15</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font>0px</font>&nbsp;<font>1px</font>&nbsp;<font>3px</font>&nbsp;<font color="#9932cc">hsla</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-primary-darker-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">0.25</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font>0px</font>&nbsp;<font>2px</font>&nbsp;<font>6px</font>&nbsp;<font color="#9932cc">hsla</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-primary-darker-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">0.1</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font>0px</font>&nbsp;<font>6px</font>&nbsp;<font>10px</font>&nbsp;<font>-2px</font>&nbsp;<font color="#9932cc">hsla</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-primary-darker-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">0.25</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-btn<font>--primary</font></font><font color="#00AA00">:</font><font color="#F5758F">hover</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">background</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">hsl</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-primary-light-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">box-shadow</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">inset</font>&nbsp;<font>0px</font>&nbsp;<font>1px</font>&nbsp;<font>0px</font>&nbsp;<font color="#9932cc">hsla</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-white-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">0.15</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font>0px</font>&nbsp;<font>1px</font>&nbsp;<font>2px</font>&nbsp;<font color="#9932cc">hsla</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-primary-darker-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">0.25</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font>0px</font>&nbsp;<font>1px</font>&nbsp;<font>4px</font>&nbsp;<font color="#9932cc">hsla</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-primary-darker-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">0.1</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font>0px</font>&nbsp;<font>3px</font>&nbsp;<font>6px</font>&nbsp;<font>-2px</font>&nbsp;<font color="#9932cc">hsla</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-primary-darker-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">0.25</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-btn<font>--primary</font></font><font color="#00AA00">:</font><font color="#F5758F">focus</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">box-shadow</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">inset</font>&nbsp;<font>0px</font>&nbsp;<font>1px</font>&nbsp;<font>0px</font>&nbsp;<font color="#9932cc">hsla</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-white-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">0.15</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font>0px</font>&nbsp;<font>1px</font>&nbsp;<font>2px</font>&nbsp;<font color="#9932cc">hsla</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-primary-darker-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">0.25</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font>0px</font>&nbsp;<font>1px</font>&nbsp;<font>4px</font>&nbsp;<font color="#9932cc">hsla</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-primary-darker-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">0.1</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font>0px</font>&nbsp;<font>3px</font>&nbsp;<font>6px</font>&nbsp;<font>-2px</font>&nbsp;<font color="#9932cc">hsla</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-primary-darker-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">0.25</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font>0px</font>&nbsp;<font>0px</font>&nbsp;<font>0px</font>&nbsp;<font>2px</font>&nbsp;<font color="#9932cc">hsl</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-bg-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font>0px</font>&nbsp;<font>0px</font>&nbsp;<font>0px</font>&nbsp;<font>4px</font>&nbsp;<font color="#9932cc">hsl</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-primary-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#808080">/*&nbsp;icons&nbsp;*/</font></li><li><font color="#6666ff">.sq7-icon</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">height</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-size</font><font color="#00AA00">,</font>&nbsp;<font>1em</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">width</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-size</font><font color="#00AA00">,</font>&nbsp;<font>1em</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">display</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">inline-block</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">color</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">inherit</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">fill</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">currentColor</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">line-height</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">1</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">flex-shrink</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">max-width</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">initial</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#808080">/*&nbsp;component&nbsp;*/</font></li><li><font color="#00AA00">:</font><font color="#F5758F">root</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font>--slideshow-height</font><font color="#00AA00">:</font>&nbsp;<font>280px</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font>--slideshow-fade-transition-duration</font><font color="#00AA00">:</font>&nbsp;<font>0.25s</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font>--slideshow-slide-transition-duration</font><font color="#00AA00">:</font>&nbsp;<font>0.35s</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font>--slideshow-prx-transition-duration</font><font color="#00AA00">:</font>&nbsp;<font>0.5s</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font>--slideshow-btn-width</font><font color="#00AA00">:</font>&nbsp;<font>1.6em</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font>--slideshow-btn-height</font><font color="#00AA00">:</font>&nbsp;<font>3.2em</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font>--slideshow-btn-icon-size</font><font color="#00AA00">:</font>&nbsp;<font>1.6em</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font>--slideshow-btn-offset</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-space-xs</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#3F84D9">@media</font>&nbsp;<font color="#00AA00">&#40;</font><font color="#000000">min-width</font><font color="#00AA00">:</font>&nbsp;<font>48rem</font><font color="#00AA00">&#41;</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">:</font><font color="#F5758F">root</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font>--slideshow-height</font><font color="#00AA00">:</font>&nbsp;<font>380px</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#3F84D9">@media</font>&nbsp;<font color="#00AA00">&#40;</font><font color="#000000">min-width</font><font color="#00AA00">:</font>&nbsp;<font>64rem</font><font color="#00AA00">&#41;</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">:</font><font color="#F5758F">root</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font>--slideshow-height</font><font color="#00AA00">:</font>&nbsp;<font>480px</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#3F84D9">@media</font>&nbsp;<font color="#00AA00">&#40;</font><font color="#000000">min-width</font><font color="#00AA00">:</font>&nbsp;<font>80rem</font><font color="#00AA00">&#41;</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">:</font><font color="#F5758F">root</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font>--slideshow-height</font><font color="#00AA00">:</font>&nbsp;<font>580px</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow__item</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">display</font><font color="#00AA00">:</font>&nbsp;flex<font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">align-items</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">center</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">justify-content</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">center</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">height</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--slideshow-height</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">background-size</font><font color="#00AA00">:</font>&nbsp;cover<font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">background-repeat</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">no-repeat</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">background-position</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">center</font>&nbsp;<font color="#993333">center</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#6666ff">.slideshow__item</font><font color="#00AA00">:</font><font color="#F5758F">focus</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">outline</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">none</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow<font>--ratio-16</font>\:9</font>&nbsp;<font color="#6666ff">.slideshow__item</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">height</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">padding-bottom</font><font color="#00AA00">:</font>&nbsp;<font>56.25%</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow<font>--ratio-4</font>\:3</font>&nbsp;<font color="#6666ff">.slideshow__item</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">height</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">padding-bottom</font><font color="#00AA00">:</font>&nbsp;<font>75%</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow<font>--ratio-1</font>\:1</font>&nbsp;<font color="#6666ff">.slideshow__item</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">height</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">padding-bottom</font><font color="#00AA00">:</font>&nbsp;<font>100%</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">position</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">relative</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">z-index</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">1</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">overflow</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">hidden</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow__content</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">overflow</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">hidden</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow__item</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">position</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">absolute</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">z-index</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">1</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">top</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">left</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">width</font><font color="#00AA00">:</font>&nbsp;<font>100%</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">visibility</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">hidden</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow__item<font>--selected</font></font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">position</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">relative</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">z-index</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">3</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">visibility</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">visible</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow<font>--transition-fade</font></font>&nbsp;<font color="#6666ff">.slideshow__item</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">opacity</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">transition</font><font color="#00AA00">:</font>&nbsp;opacity&nbsp;<font>0s</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--slideshow-fade-transition-duration</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;visibility&nbsp;<font>0s</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--slideshow-fade-transition-duration</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow<font>--transition-fade</font></font>&nbsp;<font color="#6666ff">.slideshow__item<font>--selected</font></font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">opacity</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">1</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">transition</font><font color="#00AA00">:</font>&nbsp;opacity&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--slideshow-fade-transition-duration</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow<font>--transition-slide</font></font>&nbsp;<font color="#6666ff">.slideshow__item</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;-webkit-animation-duration<font color="#00AA00">:</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--slideshow-slide-transition-duration</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">animation-duration</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--slideshow-slide-transition-duration</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;-webkit-animation-fill-mode<font color="#00AA00">:</font>&nbsp;<font color="#993333">forwards</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">animation-fill-mode</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">forwards</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;-webkit-animation-timing-function<font color="#00AA00">:</font>&nbsp;<font color="#9932cc">cubic-bezier</font><font color="#00AA00">&#40;</font><font color="#cc66cc">0.215</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">0.61</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">0.355</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">1</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">animation-timing-function</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">cubic-bezier</font><font color="#00AA00">&#40;</font><font color="#cc66cc">0.215</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">0.61</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">0.355</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">1</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#6666ff">.slideshow<font>--transition-slide</font></font>&nbsp;<font color="#6666ff">.slideshow__item</font>&nbsp;<font color="#00AA00">&gt;</font>&nbsp;<font color="#00AA00">*</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">visibility</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">hidden</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow<font>--transition-slide</font></font>&nbsp;<font color="#6666ff">.slideshow__item<font>--selected</font></font>&nbsp;<font color="#00AA00">&gt;</font>&nbsp;<font color="#00AA00">*</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">visibility</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">visible</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow<font>--transition-slide</font></font>&nbsp;<font color="#6666ff">.slideshow__item<font>--slide-in-left</font></font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;-webkit-animation-name<font color="#00AA00">:</font>&nbsp;slide-in-left<font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">animation-name</font><font color="#00AA00">:</font>&nbsp;slide-in-left<font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow<font>--transition-slide</font></font>&nbsp;<font color="#6666ff">.slideshow__item<font>--slide-in-right</font></font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;-webkit-animation-name<font color="#00AA00">:</font>&nbsp;slide-in-right<font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">animation-name</font><font color="#00AA00">:</font>&nbsp;slide-in-right<font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow<font>--transition-slide</font></font>&nbsp;<font color="#6666ff">.slideshow__item<font>--slide-out-left</font></font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;-webkit-animation-name<font color="#00AA00">:</font>&nbsp;slide-out-left<font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">animation-name</font><font color="#00AA00">:</font>&nbsp;slide-out-left<font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow<font>--transition-slide</font></font>&nbsp;<font color="#6666ff">.slideshow__item<font>--slide-out-right</font></font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;-webkit-animation-name<font color="#00AA00">:</font>&nbsp;slide-out-right<font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">animation-name</font><font color="#00AA00">:</font>&nbsp;slide-out-right<font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow<font>--transition-slide</font></font>&nbsp;.slideshow__item<font>--slide-out-left</font><font color="#00AA00">,</font></li><li><font color="#6666ff">.slideshow<font>--transition-slide</font></font>&nbsp;<font color="#6666ff">.slideshow__item<font>--slide-out-right</font></font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">z-index</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">2</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#6666ff">.slideshow<font>--transition-slide</font></font>&nbsp;<font color="#6666ff">.slideshow__item<font>--slide-out-left</font></font>.slideshow__item<font>--selected</font><font color="#00AA00">,</font></li><li><font color="#6666ff">.slideshow<font>--transition-slide</font></font>&nbsp;<font color="#6666ff">.slideshow__item<font>--slide-out-right</font></font><font color="#6666ff">.slideshow__item<font>--selected</font></font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">z-index</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">3</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#6666ff">.slideshow<font>--transition-slide</font></font>&nbsp;<font color="#6666ff">.slideshow__item<font>--slide-out-left</font></font>&nbsp;<font color="#00AA00">&gt;</font>&nbsp;<font color="#00AA00">*,</font></li><li><font color="#6666ff">.slideshow<font>--transition-slide</font></font>&nbsp;<font color="#6666ff">.slideshow__item<font>--slide-out-right</font></font>&nbsp;<font color="#00AA00">&gt;</font>&nbsp;<font color="#00AA00">*</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">visibility</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">visible</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#3F84D9">@-webkit-keyframes</font>&nbsp;slide-in-left&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font>0%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">visibility</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">visible</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>-100%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>-100%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li>&nbsp;&nbsp;<font>100%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#3F84D9">@keyframes</font>&nbsp;slide-in-left&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font>0%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">visibility</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">visible</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>-100%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>-100%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li>&nbsp;&nbsp;<font>100%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#3F84D9">@-webkit-keyframes</font>&nbsp;slide-in-right&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font>0%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">visibility</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">visible</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>100%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>100%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li>&nbsp;&nbsp;<font>100%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#3F84D9">@keyframes</font>&nbsp;slide-in-right&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font>0%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">visibility</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">visible</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>100%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>100%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li>&nbsp;&nbsp;<font>100%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#3F84D9">@-webkit-keyframes</font>&nbsp;slide-out-left&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font>0%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">visibility</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">visible</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li>&nbsp;&nbsp;<font>100%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>100%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>100%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#3F84D9">@keyframes</font>&nbsp;slide-out-left&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font>0%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">visibility</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">visible</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li>&nbsp;&nbsp;<font>100%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>100%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>100%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#3F84D9">@-webkit-keyframes</font>&nbsp;slide-out-right&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font>0%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">visibility</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">visible</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li>&nbsp;&nbsp;<font>100%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>-100%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>-100%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#3F84D9">@keyframes</font>&nbsp;slide-out-right&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font>0%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">visibility</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">visible</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li>&nbsp;&nbsp;<font>100%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>-100%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>-100%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#6666ff">.slideshow<font>--transition-prx</font></font>&nbsp;<font color="#6666ff">.slideshow__item</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;-webkit-animation-duration<font color="#00AA00">:</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--slideshow-prx-transition-duration</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">animation-duration</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--slideshow-prx-transition-duration</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;-webkit-animation-fill-mode<font color="#00AA00">:</font>&nbsp;<font color="#993333">forwards</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">animation-fill-mode</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">forwards</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;-webkit-animation-timing-function<font color="#00AA00">:</font>&nbsp;<font color="#9932cc">cubic-bezier</font><font color="#00AA00">&#40;</font><font color="#cc66cc">0.215</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">0.61</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">0.355</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">1</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">animation-timing-function</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">cubic-bezier</font><font color="#00AA00">&#40;</font><font color="#cc66cc">0.215</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">0.61</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">0.355</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">1</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#6666ff">.slideshow<font>--transition-prx</font></font>&nbsp;<font color="#6666ff">.slideshow__item</font>&nbsp;<font color="#00AA00">&gt;</font>&nbsp;<font color="#00AA00">*</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">visibility</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">hidden</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow<font>--transition-prx</font></font>&nbsp;<font color="#6666ff">.slideshow__item<font>--selected</font></font>&nbsp;<font color="#00AA00">&gt;</font>&nbsp;<font color="#00AA00">*</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">visibility</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">visible</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow<font>--transition-prx</font></font>&nbsp;<font color="#6666ff">.slideshow__item<font>--prx-in-left</font></font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;-webkit-animation-name<font color="#00AA00">:</font>&nbsp;prx-in-left<font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">animation-name</font><font color="#00AA00">:</font>&nbsp;prx-in-left<font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow<font>--transition-prx</font></font>&nbsp;<font color="#6666ff">.slideshow__item<font>--prx-in-right</font></font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;-webkit-animation-name<font color="#00AA00">:</font>&nbsp;prx-in-right<font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">animation-name</font><font color="#00AA00">:</font>&nbsp;prx-in-right<font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow<font>--transition-prx</font></font>&nbsp;<font color="#6666ff">.slideshow__item<font>--prx-out-left</font></font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;-webkit-animation-name<font color="#00AA00">:</font>&nbsp;prx-out-left<font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">animation-name</font><font color="#00AA00">:</font>&nbsp;prx-out-left<font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow<font>--transition-prx</font></font>&nbsp;<font color="#6666ff">.slideshow__item<font>--prx-out-right</font></font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;-webkit-animation-name<font color="#00AA00">:</font>&nbsp;prx-out-right<font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">animation-name</font><font color="#00AA00">:</font>&nbsp;prx-out-right<font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow<font>--transition-prx</font></font>&nbsp;.slideshow__item<font>--prx-out-left</font><font color="#00AA00">,</font></li><li><font color="#6666ff">.slideshow<font>--transition-prx</font></font>&nbsp;<font color="#6666ff">.slideshow__item<font>--prx-out-right</font></font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">z-index</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">2</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#6666ff">.slideshow<font>--transition-prx</font></font>&nbsp;<font color="#6666ff">.slideshow__item<font>--prx-out-left</font></font>.slideshow__item<font>--selected</font><font color="#00AA00">,</font></li><li><font color="#6666ff">.slideshow<font>--transition-prx</font></font>&nbsp;<font color="#6666ff">.slideshow__item<font>--prx-out-right</font></font><font color="#6666ff">.slideshow__item<font>--selected</font></font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">z-index</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">3</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#6666ff">.slideshow<font>--transition-prx</font></font>&nbsp;<font color="#6666ff">.slideshow__item<font>--prx-out-left</font></font>&nbsp;<font color="#00AA00">&gt;</font>&nbsp;<font color="#00AA00">*,</font></li><li><font color="#6666ff">.slideshow<font>--transition-prx</font></font>&nbsp;<font color="#6666ff">.slideshow__item<font>--prx-out-right</font></font>&nbsp;<font color="#00AA00">&gt;</font>&nbsp;<font color="#00AA00">*</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">visibility</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">visible</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#3F84D9">@-webkit-keyframes</font>&nbsp;prx-in-left&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font>0%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">visibility</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">visible</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>-100%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>-100%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li>&nbsp;&nbsp;<font>100%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#3F84D9">@keyframes</font>&nbsp;prx-in-left&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font>0%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">visibility</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">visible</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>-100%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>-100%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li>&nbsp;&nbsp;<font>100%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#3F84D9">@-webkit-keyframes</font>&nbsp;prx-in-right&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font>0%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">visibility</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">visible</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>100%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>100%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li>&nbsp;&nbsp;<font>100%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#3F84D9">@keyframes</font>&nbsp;prx-in-right&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font>0%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">visibility</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">visible</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>100%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>100%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li>&nbsp;&nbsp;<font>100%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#3F84D9">@-webkit-keyframes</font>&nbsp;prx-out-left&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font>0%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">opacity</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">1</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">visibility</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">visible</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li>&nbsp;&nbsp;<font>100%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">opacity</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0.3</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>40%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>40%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#3F84D9">@keyframes</font>&nbsp;prx-out-left&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font>0%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">opacity</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">1</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">visibility</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">visible</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li>&nbsp;&nbsp;<font>100%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">opacity</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0.3</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>40%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>40%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#3F84D9">@-webkit-keyframes</font>&nbsp;prx-out-right&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font>0%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">opacity</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">1</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">visibility</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">visible</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li>&nbsp;&nbsp;<font>100%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">opacity</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0.3</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>-40%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>-40%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#3F84D9">@keyframes</font>&nbsp;prx-out-right&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font>0%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">opacity</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">1</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">visibility</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">visible</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li>&nbsp;&nbsp;<font>100%</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">opacity</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0.3</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>-40%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateX<font color="#00AA00">&#40;</font><font>-40%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li><font color="#00AA00">&#125;</font></li><li>.slideshow<font color="#00AA00">&#91;</font>data-swipe<font color="#00AA00">=</font>on<font color="#00AA00">&#93;</font>&nbsp;<font color="#6666ff">.slideshow__content</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;-webkit-user-select<font color="#00AA00">:</font>&nbsp;<font color="#993333">none</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-user-select<font color="#00AA00">:</font>&nbsp;<font color="#993333">none</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-ms-user-select<font color="#00AA00">:</font>&nbsp;<font color="#993333">none</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;user-select<font color="#00AA00">:</font>&nbsp;<font color="#993333">none</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>.slideshow<font color="#00AA00">&#91;</font>data-swipe<font color="#00AA00">=</font>on<font color="#00AA00">&#93;</font>&nbsp;<font color="#6666ff">.slideshow__content</font>&nbsp;img&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">pointer-events</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">none</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow__control</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">display</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">none</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li>.slideshow<font color="#00AA00">&#91;</font>data-controls<font color="#00AA00">=</font><font color="#F5758F">hover</font><font color="#00AA00">&#93;</font>&nbsp;<font color="#6666ff">.slideshow__control</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">opacity</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">transition</font><font color="#00AA00">:</font>&nbsp;opacity&nbsp;<font>0.3s</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li>.slideshow<font color="#00AA00">&#91;</font>data-controls<font color="#00AA00">=</font><font color="#F5758F">hover</font><font color="#00AA00">&#93;</font><font color="#00AA00">:</font><font color="#F5758F">hover</font>&nbsp;<font color="#6666ff">.slideshow__control</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">opacity</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">1</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li>.slideshow<font color="#00AA00">&#91;</font>data-swipe<font color="#00AA00">=</font>on<font color="#00AA00">&#93;</font>&nbsp;<font color="#6666ff">.slideshow__control</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">display</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">none</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow__control</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">display</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">block</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">position</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">absolute</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">z-index</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">4</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">top</font><font color="#00AA00">:</font>&nbsp;<font>50%</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateY<font color="#00AA00">&#40;</font><font>-50%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateY<font color="#00AA00">&#40;</font><font>-50%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#6666ff">.slideshow__control</font><font color="#00AA00">:</font><font color="#F5758F">first-of-type</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">left</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--slideshow-btn-offset</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#6666ff">.slideshow__control</font><font color="#00AA00">:</font><font color="#F5758F">last-of-type</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">right</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--slideshow-btn-offset</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#3F84D9">@media</font>&nbsp;<font color="#00AA00">&#40;</font><font color="#000000">min-width</font><font color="#00AA00">:</font>&nbsp;<font>64rem</font><font color="#00AA00">&#41;</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;.slideshow<font color="#00AA00">&#91;</font>data-swipe<font color="#00AA00">=</font>on<font color="#00AA00">&#93;</font>&nbsp;<font color="#6666ff">.slideshow__control</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">display</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">block</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#6666ff">.slideshow__btn</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">display</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">block</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">background-color</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">hsla</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-black-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">0.75</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">height</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--slideshow-btn-height</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">width</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--slideshow-btn-width</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">border-radius</font><font color="#00AA00">:</font>&nbsp;<font>0.25em</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">cursor</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">pointer</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">transition</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">background</font>&nbsp;<font>0.2s</font><font color="#00AA00">,</font>&nbsp;-webkit-transform&nbsp;<font>0.2s</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">transition</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">background</font>&nbsp;<font>0.2s</font><font color="#00AA00">,</font>&nbsp;transform&nbsp;<font>0.2s</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">transition</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">background</font>&nbsp;<font>0.2s</font><font color="#00AA00">,</font>&nbsp;transform&nbsp;<font>0.2s</font><font color="#00AA00">,</font>&nbsp;-webkit-transform&nbsp;<font>0.2s</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#6666ff">.slideshow__btn</font><font color="#00AA00">:</font><font color="#F5758F">hover</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">background-color</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">hsla</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-contrast-higher-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">0.85</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#6666ff">.slideshow__btn</font><font color="#00AA00">:</font><font color="#F5758F">hover</font>&nbsp;svg&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">color</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">hsl</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-bg-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#6666ff">.slideshow</font><font color="#00AA00">:</font><font color="#F5758F">not</font><font color="#00AA00">&#40;</font>.slideshow<font>--is-animating</font><font color="#00AA00">&#41;</font>&nbsp;<font color="#6666ff">.slideshow__btn</font><font color="#00AA00">:</font><font color="#F5758F">active</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;translateY<font color="#00AA00">&#40;</font><font>2px</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;translateY<font color="#00AA00">&#40;</font><font>2px</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#6666ff">.slideshow__btn</font>&nbsp;svg&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">display</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">block</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">width</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--slideshow-btn-icon-size</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">height</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--slideshow-btn-icon-size</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">margin</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0</font>&nbsp;<font color="#993333">auto</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">transition</font><font color="#00AA00">:</font>&nbsp;color&nbsp;<font>0.2s</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">color</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">hsl</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-white-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#3F84D9">@supports</font>&nbsp;<font color="#00AA00">&#40;</font><font color="#000000">grid-area</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">auto</font><font color="#00AA00">&#41;</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#6666ff">.slideshow__btn</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">background-color</font><font color="#00AA00">:</font>&nbsp;<font color="#dc143c">transparent</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li>&nbsp;&nbsp;<font color="#6666ff">.slideshow__btn</font>&nbsp;svg&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">color</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">hsl</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-contrast-higher-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow__navigation</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">position</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">absolute</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">z-index</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">4</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">bottom</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">width</font><font color="#00AA00">:</font>&nbsp;<font>100%</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">height</font><font color="#00AA00">:</font>&nbsp;<font>32px</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">display</font><font color="#00AA00">:</font>&nbsp;flex<font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">justify-content</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">center</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">align-items</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">center</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">background</font><font color="#00AA00">:</font>&nbsp;<font color="#dc143c">transparent</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow__nav-item</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">display</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">inline-block</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">margin</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-space-3xs</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#6666ff">.slideshow__nav-item</font>&nbsp;<font color="#993333">button</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">display</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">block</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">position</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">relative</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">font-size</font><font color="#00AA00">:</font>&nbsp;<font>8px</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">color</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">hsl</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-contrast-high-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">height</font><font color="#00AA00">:</font>&nbsp;<font>1em</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">width</font><font color="#00AA00">:</font>&nbsp;<font>1em</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">border-radius</font><font color="#00AA00">:</font>&nbsp;<font>50%</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">background-color</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">currentColor</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">opacity</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0.4</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">cursor</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">pointer</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">transition</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">background</font>&nbsp;<font>0.3s</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#6666ff">.slideshow__nav-item</font>&nbsp;<font color="#993333">button</font><font color="#00AA00">::</font><font color="#F5758F">before</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">content</font><font color="#00AA00">:</font>&nbsp;<font color="#ff0000">&quot;&quot;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">position</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">absolute</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">top</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">calc</font><font color="#00AA00">&#40;</font><font>50%</font>&nbsp;-&nbsp;<font>0.5em</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">left</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">calc</font><font color="#00AA00">&#40;</font><font>50%</font>&nbsp;-&nbsp;<font>0.5em</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">height</font><font color="#00AA00">:</font>&nbsp;<font>1em</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">width</font><font color="#00AA00">:</font>&nbsp;<font>1em</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">font-size</font><font color="#00AA00">:</font>&nbsp;<font>14px</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">border-radius</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">inherit</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">border</font><font color="#00AA00">:</font>&nbsp;<font>1px</font>&nbsp;<font color="#993333">solid</font>&nbsp;<font color="#9932cc">hsl</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-contrast-high-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">opacity</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;<font color="#9932cc">scale</font><font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">scale</font><font color="#00AA00">&#40;</font><font color="#cc66cc">0</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">transition</font><font color="#00AA00">:</font>&nbsp;<font>0.3s</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#6666ff">.slideshow__nav-item</font>&nbsp;<font color="#993333">button</font><font color="#00AA00">:</font><font color="#F5758F">focus</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">outline</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">none</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li><font color="#6666ff">.slideshow__nav-item</font>&nbsp;<font color="#993333">button</font><font color="#00AA00">:</font><font color="#F5758F">focus</font><font color="#00AA00">::</font><font color="#F5758F">before</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">opacity</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">1</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;-webkit-transform<font color="#00AA00">:</font>&nbsp;<font color="#9932cc">scale</font><font color="#00AA00">&#40;</font><font color="#cc66cc">1</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">transform</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">scale</font><font color="#00AA00">&#40;</font><font color="#cc66cc">1</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.slideshow__nav-item<font>--selected</font></font>&nbsp;<font color="#993333">button</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">opacity</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">1</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#3F84D9">@media</font>&nbsp;<font color="#00AA00">&#40;</font><font color="#000000">min-width</font><font color="#00AA00">:</font>&nbsp;<font>64rem</font><font color="#00AA00">&#41;</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#6666ff">.slideshow__navigation</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">height</font><font color="#00AA00">:</font>&nbsp;<font>40px</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li>&nbsp;&nbsp;<font color="#6666ff">.slideshow__nav-item</font>&nbsp;<font color="#993333">button</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">font-size</font><font color="#00AA00">:</font>&nbsp;<font>10px</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li>&nbsp;&nbsp;<font color="#6666ff">.slideshow__nav-item</font>&nbsp;<font color="#993333">button</font><font color="#00AA00">::</font><font color="#F5758F">before</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000000">font-size</font><font color="#00AA00">:</font>&nbsp;<font>16px</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#00AA00">&#125;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#808080">/*&nbsp;utility&nbsp;classes&nbsp;*/</font></li><li><font color="#6666ff">.sq7-sr-only</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">position</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">absolute</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">clip</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">rect</font><font color="#00AA00">&#40;</font><font>1px</font><font color="#00AA00">,</font>&nbsp;<font>1px</font><font color="#00AA00">,</font>&nbsp;<font>1px</font><font color="#00AA00">,</font>&nbsp;<font>1px</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">clip-path</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">inset</font><font color="#00AA00">&#40;</font><font>50%</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">width</font><font color="#00AA00">:</font>&nbsp;<font>1px</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">height</font><font color="#00AA00">:</font>&nbsp;<font>1px</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">overflow</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">hidden</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">padding</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">border</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">white-space</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">nowrap</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-bg-light</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font>--sq7-bg-o</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">1</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">background-color</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">hsla</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-bg-light-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-bg-o</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">1</font><font color="#00AA00">&#41;</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-text-center</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">text-align</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">center</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-text-component</font>&nbsp;<font color="#00AA00">:</font>where<font color="#00AA00">&#40;</font>h1<font color="#00AA00">,</font>&nbsp;h2<font color="#00AA00">,</font>&nbsp;h3<font color="#00AA00">,</font>&nbsp;h4<font color="#00AA00">&#41;</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">line-height</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-heading-line-height</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">1.2</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">margin-top</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">calc</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-space-md</font><font color="#00AA00">&#41;</font>&nbsp;<font color="#00AA00">*</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-space-multiplier</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">1</font><font color="#00AA00">&#41;</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">margin-bottom</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">calc</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-space-sm</font><font color="#00AA00">&#41;</font>&nbsp;<font color="#00AA00">*</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-space-multiplier</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">1</font><font color="#00AA00">&#41;</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-text-component</font>&nbsp;<font color="#00AA00">:</font>where<font color="#00AA00">&#40;</font>p<font color="#00AA00">,</font>&nbsp;blockquote<font color="#00AA00">,</font>&nbsp;ul&nbsp;li<font color="#00AA00">,</font>&nbsp;ol&nbsp;li<font color="#00AA00">&#41;</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">line-height</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-body-line-height</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">1.4</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-text-component</font>&nbsp;<font color="#00AA00">:</font>where<font color="#00AA00">&#40;</font>ul<font color="#00AA00">,</font>&nbsp;ol<font color="#00AA00">,</font>&nbsp;p<font color="#00AA00">,</font>&nbsp;blockquote<font color="#00AA00">,</font>&nbsp;.sq7-text-component__block<font color="#00AA00">&#41;</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">margin-bottom</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">calc</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-space-sm</font><font color="#00AA00">&#41;</font>&nbsp;<font color="#00AA00">*</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-space-multiplier</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">1</font><font color="#00AA00">&#41;</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-text-component</font>&nbsp;<font color="#00AA00">:</font>where<font color="#00AA00">&#40;</font>ul<font color="#00AA00">,</font>&nbsp;ol<font color="#00AA00">&#41;</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">padding-left</font><font color="#00AA00">:</font>&nbsp;<font>1.25em</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-text-component</font>&nbsp;ul&nbsp;<font color="#00AA00">:</font>where<font color="#00AA00">&#40;</font>ul<font color="#00AA00">,</font>&nbsp;ol<font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font color="#6666ff">.sq7-text-component</font>&nbsp;ol&nbsp;<font color="#00AA00">:</font>where<font color="#00AA00">&#40;</font>ul<font color="#00AA00">,</font>&nbsp;ol<font color="#00AA00">&#41;</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">padding-left</font><font color="#00AA00">:</font>&nbsp;<font>1em</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">margin-bottom</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-text-component</font>&nbsp;ul&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">list-style-type</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">disc</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-text-component</font>&nbsp;ol&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">list-style-type</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">decimal</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-text-component</font>&nbsp;img&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">display</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">block</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">margin</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0</font>&nbsp;<font color="#993333">auto</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-text-component</font>&nbsp;figcaption&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">margin-top</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">calc</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-space-xs</font><font color="#00AA00">&#41;</font>&nbsp;<font color="#00AA00">*</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-space-multiplier</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">1</font><font color="#00AA00">&#41;</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">font-size</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-text-sm</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">text-align</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">center</font><font color="#00AA00">;</font><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-text-component</font>&nbsp;em&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">font-style</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">italic</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-text-component</font>&nbsp;strong&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">font-weight</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">bold</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-text-component</font>&nbsp;s&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">text-decoration</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">line-through</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-text-component</font>&nbsp;u&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">text-decoration</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">underline</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-text-component</font>&nbsp;mark&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">background-color</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">hsla</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-accent-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">0.2</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">color</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">inherit</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-text-component</font>&nbsp;blockquote&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">padding-left</font><font color="#00AA00">:</font>&nbsp;<font>1em</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">border-left</font><font color="#00AA00">:</font>&nbsp;<font>4px</font>&nbsp;<font color="#993333">solid</font>&nbsp;<font color="#9932cc">hsl</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-contrast-lower-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">font-style</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">italic</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-text-component</font>&nbsp;hr&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">margin</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">calc</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-space-md</font><font color="#00AA00">&#41;</font>&nbsp;<font color="#00AA00">*</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-space-multiplier</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">1</font><font color="#00AA00">&#41;</font><font color="#00AA00">&#41;</font>&nbsp;<font color="#993333">auto</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">background</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">hsl</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-contrast-lower-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">height</font><font color="#00AA00">:</font>&nbsp;<font>1px</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-text-component</font>&nbsp;<font color="#00AA00">&gt;</font>&nbsp;<font color="#00AA00">*:</font><font color="#F5758F">first-child</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">margin-top</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-text-component</font>&nbsp;<font color="#00AA00">&gt;</font>&nbsp;<font color="#00AA00">*:</font><font color="#F5758F">last-child</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">margin-bottom</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">0</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-text-component</font><font color="#6666ff">.sq7-line-height-xs</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font>--sq7-heading-line-height</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">1</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font>--sq7-body-line-height</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">1.1</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-text-component</font><font color="#6666ff">.sq7-line-height-sm</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font>--sq7-heading-line-height</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">1.1</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font>--sq7-body-line-height</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">1.2</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-text-component</font><font color="#6666ff">.sq7-line-height-md</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font>--sq7-heading-line-height</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">1.15</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font>--sq7-body-line-height</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">1.4</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-text-component</font><font color="#6666ff">.sq7-line-height-lg</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font>--sq7-heading-line-height</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">1.22</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font>--sq7-body-line-height</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">1.58</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-text-component</font><font color="#6666ff">.sq7-line-height-xl</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font>--sq7-heading-line-height</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">1.3</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font>--sq7-body-line-height</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">1.72</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-max-width-sm</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">max-width</font><font color="#00AA00">:</font>&nbsp;<font>48rem</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-container</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">width</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">calc</font><font color="#00AA00">&#40;</font><font>100%</font>&nbsp;-&nbsp;<font color="#cc66cc">2</font><font color="#00AA00">*</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-space-md</font><font color="#00AA00">&#41;</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">margin-left</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">auto</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">margin-right</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">auto</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-color-inherit</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">color</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">inherit</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-gap-sm</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;gap<font color="#00AA00">:</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-space-sm</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-flex-center</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">justify-content</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">center</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">align-items</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">center</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-flex-wrap</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">flex-wrap</font><font color="#00AA00">:</font>&nbsp;wrap<font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-flex</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">display</font><font color="#00AA00">:</font>&nbsp;flex<font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-margin-top-md</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">margin-top</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-space-md</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-bg</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font>--sq7-bg-o</font><font color="#00AA00">:</font>&nbsp;<font color="#cc66cc">1</font><font color="#00AA00">;</font></li><li>&nbsp;&nbsp;<font color="#000000">background-color</font><font color="#00AA00">:</font>&nbsp;<font color="#9932cc">hsla</font><font color="#00AA00">&#40;</font><font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-color-bg-hsl</font><font color="#00AA00">&#41;</font><font color="#00AA00">,</font>&nbsp;<font color="#9932cc">var</font><font color="#00AA00">&#40;</font><font>--sq7-bg-o</font><font color="#00AA00">,</font>&nbsp;<font color="#cc66cc">1</font><font color="#00AA00">&#41;</font><font color="#00AA00">&#41;</font><font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li><li>&nbsp;</li><li><font color="#6666ff">.sq7-hide</font>&nbsp;<font color="#00AA00">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000000">display</font><font color="#00AA00">:</font>&nbsp;<font color="#993333">none</font>&nbsp;!important<font color="#00AA00">;</font></li><li><font color="#00AA00">&#125;</font></li></ol></blockquote></code></pre></div><!-- Coding Board --><br><br><!-- Coding Board --><div class="code-highlight"><div class="code-header margin-bottom-xs" style="text-align: right"><span class="file-name margin-bottom-md padding-sm padding-md@lg">JavaScript (_1_swipe-content.js)</span> <button class="copy-button btn btn--sm btn--black radius-full"><svg stroke="currentColor" fill="none" stroke-width="2" viewbox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>&nbsp;Copy Code</button></div><pre class="code-snippet"><code class="language-javascript"><blockquote><ol><li><font color="#006600">//&nbsp;File#:&nbsp;_1_swipe-content</font></li><li><font color="#009900">&#40;</font><font color="#000066">function</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>	<font color="#000066">var</font>&nbsp;SwipeContent&nbsp;<font color="#339933">=</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font>element<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		<font color="#000066">this</font>.<font color="#660066">element</font>&nbsp;<font color="#339933">=</font>&nbsp;element<font color="#339933">;</font></li><li>		<font color="#000066">this</font>.<font color="#660066">delta</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#009900">&#91;</font><font color="#003366">false</font><font color="#339933">,</font>&nbsp;<font color="#003366">false</font><font color="#009900">&#93;</font><font color="#339933">;</font></li><li>		<font color="#000066">this</font>.<font color="#660066">dragging</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">false</font><font color="#339933">;</font></li><li>		<font color="#000066">this</font>.<font color="#660066">intervalId</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">false</font><font color="#339933">;</font></li><li>		initSwipeContent<font color="#009900">&#40;</font><font color="#000066">this</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	<font color="#000066">function</font>&nbsp;initSwipeContent<font color="#009900">&#40;</font>content<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		content.<font color="#660066">element</font>.<font color="#660066">addEventListener</font><font color="#009900">&#40;</font><font color="#3366CC">'mousedown'</font><font color="#339933">,</font>&nbsp;handleEvent.<font color="#660066">bind</font><font color="#009900">&#40;</font>content<font color="#009900">&#41;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		content.<font color="#660066">element</font>.<font color="#660066">addEventListener</font><font color="#009900">&#40;</font><font color="#3366CC">'touchstart'</font><font color="#339933">,</font>&nbsp;handleEvent.<font color="#660066">bind</font><font color="#009900">&#40;</font>content<font color="#009900">&#41;</font><font color="#339933">,</font>&nbsp;<font color="#009900">&#123;</font>passive<font color="#339933">:</font>&nbsp;<font color="#003366">true</font><font color="#009900">&#125;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	<font color="#000066">function</font>&nbsp;initDragging<font color="#009900">&#40;</font>content<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		<font color="#006600">//add&nbsp;event&nbsp;listeners</font></li><li>		content.<font color="#660066">element</font>.<font color="#660066">addEventListener</font><font color="#009900">&#40;</font><font color="#3366CC">'mousemove'</font><font color="#339933">,</font>&nbsp;handleEvent.<font color="#660066">bind</font><font color="#009900">&#40;</font>content<font color="#009900">&#41;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		content.<font color="#660066">element</font>.<font color="#660066">addEventListener</font><font color="#009900">&#40;</font><font color="#3366CC">'touchmove'</font><font color="#339933">,</font>&nbsp;handleEvent.<font color="#660066">bind</font><font color="#009900">&#40;</font>content<font color="#009900">&#41;</font><font color="#339933">,</font>&nbsp;<font color="#009900">&#123;</font>passive<font color="#339933">:</font>&nbsp;<font color="#003366">true</font><font color="#009900">&#125;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		content.<font color="#660066">element</font>.<font color="#660066">addEventListener</font><font color="#009900">&#40;</font><font color="#3366CC">'mouseup'</font><font color="#339933">,</font>&nbsp;handleEvent.<font color="#660066">bind</font><font color="#009900">&#40;</font>content<font color="#009900">&#41;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		content.<font color="#660066">element</font>.<font color="#660066">addEventListener</font><font color="#009900">&#40;</font><font color="#3366CC">'mouseleave'</font><font color="#339933">,</font>&nbsp;handleEvent.<font color="#660066">bind</font><font color="#009900">&#40;</font>content<font color="#009900">&#41;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		content.<font color="#660066">element</font>.<font color="#660066">addEventListener</font><font color="#009900">&#40;</font><font color="#3366CC">'touchend'</font><font color="#339933">,</font>&nbsp;handleEvent.<font color="#660066">bind</font><font color="#009900">&#40;</font>content<font color="#009900">&#41;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	<font color="#000066">function</font>&nbsp;cancelDragging<font color="#009900">&#40;</font>content<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		<font color="#006600">//remove&nbsp;event&nbsp;listeners</font></li><li>		<font color="#000066">if</font><font color="#009900">&#40;</font>content.<font color="#660066">intervalId</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>			<font color="#009900">&#40;</font><font color="#339933">!</font>window.<font color="#660066">requestAnimationFrame</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">?</font>&nbsp;clearInterval<font color="#009900">&#40;</font>content.<font color="#660066">intervalId</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">:</font>&nbsp;window.<font color="#660066">cancelAnimationFrame</font><font color="#009900">&#40;</font>content.<font color="#660066">intervalId</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			content.<font color="#660066">intervalId</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">false</font><font color="#339933">;</font></li><li>		<font color="#009900">&#125;</font></li><li>		content.<font color="#660066">element</font>.<font color="#660066">removeEventListener</font><font color="#009900">&#40;</font><font color="#3366CC">'mousemove'</font><font color="#339933">,</font>&nbsp;handleEvent.<font color="#660066">bind</font><font color="#009900">&#40;</font>content<font color="#009900">&#41;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		content.<font color="#660066">element</font>.<font color="#660066">removeEventListener</font><font color="#009900">&#40;</font><font color="#3366CC">'touchmove'</font><font color="#339933">,</font>&nbsp;handleEvent.<font color="#660066">bind</font><font color="#009900">&#40;</font>content<font color="#009900">&#41;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		content.<font color="#660066">element</font>.<font color="#660066">removeEventListener</font><font color="#009900">&#40;</font><font color="#3366CC">'mouseup'</font><font color="#339933">,</font>&nbsp;handleEvent.<font color="#660066">bind</font><font color="#009900">&#40;</font>content<font color="#009900">&#41;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		content.<font color="#660066">element</font>.<font color="#660066">removeEventListener</font><font color="#009900">&#40;</font><font color="#3366CC">'mouseleave'</font><font color="#339933">,</font>&nbsp;handleEvent.<font color="#660066">bind</font><font color="#009900">&#40;</font>content<font color="#009900">&#41;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		content.<font color="#660066">element</font>.<font color="#660066">removeEventListener</font><font color="#009900">&#40;</font><font color="#3366CC">'touchend'</font><font color="#339933">,</font>&nbsp;handleEvent.<font color="#660066">bind</font><font color="#009900">&#40;</font>content<font color="#009900">&#41;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	<font color="#000066">function</font>&nbsp;handleEvent<font color="#009900">&#40;</font>event<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		<font color="#000066">switch</font><font color="#009900">&#40;</font>event.<font color="#660066">type</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>			<font color="#000066">case</font>&nbsp;<font color="#3366CC">'mousedown'</font><font color="#339933">:</font></li><li>			<font color="#000066">case</font>&nbsp;<font color="#3366CC">'touchstart'</font><font color="#339933">:</font></li><li>				startDrag<font color="#009900">&#40;</font><font color="#000066">this</font><font color="#339933">,</font>&nbsp;event<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>				<font color="#000066">break</font><font color="#339933">;</font></li><li>			<font color="#000066">case</font>&nbsp;<font color="#3366CC">'mousemove'</font><font color="#339933">:</font></li><li>			<font color="#000066">case</font>&nbsp;<font color="#3366CC">'touchmove'</font><font color="#339933">:</font></li><li>				drag<font color="#009900">&#40;</font><font color="#000066">this</font><font color="#339933">,</font>&nbsp;event<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>				<font color="#000066">break</font><font color="#339933">;</font></li><li>			<font color="#000066">case</font>&nbsp;<font color="#3366CC">'mouseup'</font><font color="#339933">:</font></li><li>			<font color="#000066">case</font>&nbsp;<font color="#3366CC">'mouseleave'</font><font color="#339933">:</font></li><li>			<font color="#000066">case</font>&nbsp;<font color="#3366CC">'touchend'</font><font color="#339933">:</font></li><li>				endDrag<font color="#009900">&#40;</font><font color="#000066">this</font><font color="#339933">,</font>&nbsp;event<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>				<font color="#000066">break</font><font color="#339933">;</font></li><li>		<font color="#009900">&#125;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	<font color="#000066">function</font>&nbsp;startDrag<font color="#009900">&#40;</font>content<font color="#339933">,</font>&nbsp;event<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		content.<font color="#660066">dragging</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">true</font><font color="#339933">;</font></li><li>		<font color="#006600">//&nbsp;listen&nbsp;to&nbsp;drag&nbsp;movements</font></li><li>		initDragging<font color="#009900">&#40;</font>content<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		content.<font color="#660066">delta</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#009900">&#91;</font>parseInt<font color="#009900">&#40;</font>unify<font color="#009900">&#40;</font>event<font color="#009900">&#41;</font>.<font color="#660066">clientX</font><font color="#009900">&#41;</font><font color="#339933">,</font>&nbsp;parseInt<font color="#009900">&#40;</font>unify<font color="#009900">&#40;</font>event<font color="#009900">&#41;</font>.<font color="#660066">clientY</font><font color="#009900">&#41;</font><font color="#009900">&#93;</font><font color="#339933">;</font></li><li>		<font color="#006600">//&nbsp;emit&nbsp;drag&nbsp;start&nbsp;event</font></li><li>		emitSwipeEvents<font color="#009900">&#40;</font>content<font color="#339933">,</font>&nbsp;<font color="#3366CC">'dragStart'</font><font color="#339933">,</font>&nbsp;content.<font color="#660066">delta</font><font color="#339933">,</font>&nbsp;event.<font color="#660066">target</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	<font color="#000066">function</font>&nbsp;endDrag<font color="#009900">&#40;</font>content<font color="#339933">,</font>&nbsp;event<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		cancelDragging<font color="#009900">&#40;</font>content<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#006600">//&nbsp;credits:&nbsp;https://css-tricks.com/simple-swipe-with-vanilla-javascript/</font></li><li>		<font color="#000066">var</font>&nbsp;dx&nbsp;<font color="#339933">=</font>&nbsp;parseInt<font color="#009900">&#40;</font>unify<font color="#009900">&#40;</font>event<font color="#009900">&#41;</font>.<font color="#660066">clientX</font><font color="#009900">&#41;</font><font color="#339933">,</font>&nbsp;</li><li>	&nbsp;&nbsp;&nbsp;&nbsp;dy&nbsp;<font color="#339933">=</font>&nbsp;parseInt<font color="#009900">&#40;</font>unify<font color="#009900">&#40;</font>event<font color="#009900">&#41;</font>.<font color="#660066">clientY</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	&nbsp;&nbsp;<font color="#006600">//&nbsp;check&nbsp;if&nbsp;there&nbsp;was&nbsp;a&nbsp;left/right&nbsp;swipe</font></li><li>		<font color="#000066">if</font><font color="#009900">&#40;</font>content.<font color="#660066">delta</font>&nbsp;<font color="#339933">&amp;&amp;</font>&nbsp;<font color="#009900">&#40;</font>content.<font color="#660066">delta</font><font color="#009900">&#91;</font><font color="#CC0000">0</font><font color="#009900">&#93;</font>&nbsp;<font color="#339933">||</font>&nbsp;content.<font color="#660066">delta</font><font color="#009900">&#91;</font><font color="#CC0000">0</font><font color="#009900">&#93;</font>&nbsp;<font color="#339933">===</font>&nbsp;<font color="#CC0000">0</font><font color="#009900">&#41;</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>	&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000066">var</font>&nbsp;s&nbsp;<font color="#339933">=</font>&nbsp;getSign<font color="#009900">&#40;</font>dx&nbsp;<font color="#339933">-</font>&nbsp;content.<font color="#660066">delta</font><font color="#009900">&#91;</font><font color="#CC0000">0</font><font color="#009900">&#93;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>			<font color="#000066">if</font><font color="#009900">&#40;</font><font>Math</font>.<font color="#660066">abs</font><font color="#009900">&#40;</font>dx&nbsp;<font color="#339933">-</font>&nbsp;content.<font color="#660066">delta</font><font color="#009900">&#91;</font><font color="#CC0000">0</font><font color="#009900">&#93;</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">&gt;</font>&nbsp;<font color="#CC0000">30</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>				<font color="#009900">&#40;</font>s&nbsp;<font color="#339933">&lt;</font>&nbsp;<font color="#CC0000">0</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">?</font>&nbsp;emitSwipeEvents<font color="#009900">&#40;</font>content<font color="#339933">,</font>&nbsp;<font color="#3366CC">'swipeLeft'</font><font color="#339933">,</font>&nbsp;<font color="#009900">&#91;</font>dx<font color="#339933">,</font>&nbsp;dy<font color="#009900">&#93;</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">:</font>&nbsp;emitSwipeEvents<font color="#009900">&#40;</font>content<font color="#339933">,</font>&nbsp;<font color="#3366CC">'swipeRight'</font><font color="#339933">,</font>&nbsp;<font color="#009900">&#91;</font>dx<font color="#339933">,</font>&nbsp;dy<font color="#009900">&#93;</font><font color="#009900">&#41;</font><font color="#339933">;</font>	</li><li>			<font color="#009900">&#125;</font></li><li>&nbsp;</li><li>	&nbsp;&nbsp;&nbsp;&nbsp;content.<font color="#660066">delta</font><font color="#009900">&#91;</font><font color="#CC0000">0</font><font color="#009900">&#93;</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">false</font><font color="#339933">;</font></li><li>	&nbsp;&nbsp;<font color="#009900">&#125;</font></li><li>		<font color="#006600">//&nbsp;check&nbsp;if&nbsp;there&nbsp;was&nbsp;a&nbsp;top/bottom&nbsp;swipe</font></li><li>	&nbsp;&nbsp;<font color="#000066">if</font><font color="#009900">&#40;</font>content.<font color="#660066">delta</font>&nbsp;<font color="#339933">&amp;&amp;</font>&nbsp;<font color="#009900">&#40;</font>content.<font color="#660066">delta</font><font color="#009900">&#91;</font><font color="#CC0000">1</font><font color="#009900">&#93;</font>&nbsp;<font color="#339933">||</font>&nbsp;content.<font color="#660066">delta</font><font color="#009900">&#91;</font><font color="#CC0000">1</font><font color="#009900">&#93;</font>&nbsp;<font color="#339933">===</font>&nbsp;<font color="#CC0000">0</font><font color="#009900">&#41;</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>	&nbsp;&nbsp;	<font color="#000066">var</font>&nbsp;y&nbsp;<font color="#339933">=</font>&nbsp;getSign<font color="#009900">&#40;</font>dy&nbsp;<font color="#339933">-</font>&nbsp;content.<font color="#660066">delta</font><font color="#009900">&#91;</font><font color="#CC0000">1</font><font color="#009900">&#93;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	&nbsp;&nbsp;	<font color="#000066">if</font><font color="#009900">&#40;</font><font>Math</font>.<font color="#660066">abs</font><font color="#009900">&#40;</font>dy&nbsp;<font color="#339933">-</font>&nbsp;content.<font color="#660066">delta</font><font color="#009900">&#91;</font><font color="#CC0000">1</font><font color="#009900">&#93;</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">&gt;</font>&nbsp;<font color="#CC0000">30</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>	&nbsp;&nbsp;&nbsp;&nbsp;	<font color="#009900">&#40;</font>y&nbsp;<font color="#339933">&lt;</font>&nbsp;<font color="#CC0000">0</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">?</font>&nbsp;emitSwipeEvents<font color="#009900">&#40;</font>content<font color="#339933">,</font>&nbsp;<font color="#3366CC">'swipeUp'</font><font color="#339933">,</font>&nbsp;<font color="#009900">&#91;</font>dx<font color="#339933">,</font>&nbsp;dy<font color="#009900">&#93;</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">:</font>&nbsp;emitSwipeEvents<font color="#009900">&#40;</font>content<font color="#339933">,</font>&nbsp;<font color="#3366CC">'swipeDown'</font><font color="#339933">,</font>&nbsp;<font color="#009900">&#91;</font>dx<font color="#339933">,</font>&nbsp;dy<font color="#009900">&#93;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>	&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">&#125;</font></li><li>&nbsp;</li><li>	&nbsp;&nbsp;&nbsp;&nbsp;content.<font color="#660066">delta</font><font color="#009900">&#91;</font><font color="#CC0000">1</font><font color="#009900">&#93;</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">false</font><font color="#339933">;</font></li><li>	&nbsp;&nbsp;<font color="#009900">&#125;</font></li><li>		<font color="#006600">//&nbsp;emit&nbsp;drag&nbsp;end&nbsp;event</font></li><li>	&nbsp;&nbsp;emitSwipeEvents<font color="#009900">&#40;</font>content<font color="#339933">,</font>&nbsp;<font color="#3366CC">'dragEnd'</font><font color="#339933">,</font>&nbsp;<font color="#009900">&#91;</font>dx<font color="#339933">,</font>&nbsp;dy<font color="#009900">&#93;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>	&nbsp;&nbsp;content.<font color="#660066">dragging</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">false</font><font color="#339933">;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	<font color="#000066">function</font>&nbsp;drag<font color="#009900">&#40;</font>content<font color="#339933">,</font>&nbsp;event<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		<font color="#000066">if</font><font color="#009900">&#40;</font><font color="#339933">!</font>content.<font color="#660066">dragging</font><font color="#009900">&#41;</font>&nbsp;<font color="#000066">return</font><font color="#339933">;</font></li><li>		<font color="#006600">//&nbsp;emit&nbsp;dragging&nbsp;event&nbsp;with&nbsp;coordinates</font></li><li>		<font color="#009900">&#40;</font><font color="#339933">!</font>window.<font color="#660066">requestAnimationFrame</font><font color="#009900">&#41;</font>&nbsp;</li><li>			<font color="#339933">?</font>&nbsp;content.<font color="#660066">intervalId</font>&nbsp;<font color="#339933">=</font>&nbsp;setTimeout<font color="#009900">&#40;</font><font color="#000066">function</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font><font color="#009900">&#123;</font>emitDrag.<font color="#660066">bind</font><font color="#009900">&#40;</font>content<font color="#339933">,</font>&nbsp;event<font color="#009900">&#41;</font><font color="#339933">;</font><font color="#009900">&#125;</font><font color="#339933">,</font>&nbsp;<font color="#CC0000">250</font><font color="#009900">&#41;</font>&nbsp;</li><li>			<font color="#339933">:</font>&nbsp;content.<font color="#660066">intervalId</font>&nbsp;<font color="#339933">=</font>&nbsp;window.<font color="#660066">requestAnimationFrame</font><font color="#009900">&#40;</font>emitDrag.<font color="#660066">bind</font><font color="#009900">&#40;</font>content<font color="#339933">,</font>&nbsp;event<font color="#009900">&#41;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	<font color="#000066">function</font>&nbsp;emitDrag<font color="#009900">&#40;</font>event<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		emitSwipeEvents<font color="#009900">&#40;</font><font color="#000066">this</font><font color="#339933">,</font>&nbsp;<font color="#3366CC">'dragging'</font><font color="#339933">,</font>&nbsp;<font color="#009900">&#91;</font>parseInt<font color="#009900">&#40;</font>unify<font color="#009900">&#40;</font>event<font color="#009900">&#41;</font>.<font color="#660066">clientX</font><font color="#009900">&#41;</font><font color="#339933">,</font>&nbsp;parseInt<font color="#009900">&#40;</font>unify<font color="#009900">&#40;</font>event<font color="#009900">&#41;</font>.<font color="#660066">clientY</font><font color="#009900">&#41;</font><font color="#009900">&#93;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	<font color="#000066">function</font>&nbsp;unify<font color="#009900">&#40;</font>event<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font>&nbsp;</li><li>		<font color="#006600">//&nbsp;unify&nbsp;mouse&nbsp;and&nbsp;touch&nbsp;events</font></li><li>		<font color="#000066">return</font>&nbsp;event.<font color="#660066">changedTouches</font>&nbsp;<font color="#339933">?</font>&nbsp;event.<font color="#660066">changedTouches</font><font color="#009900">&#91;</font><font color="#CC0000">0</font><font color="#009900">&#93;</font>&nbsp;<font color="#339933">:</font>&nbsp;event<font color="#339933">;</font>&nbsp;</li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	<font color="#000066">function</font>&nbsp;emitSwipeEvents<font color="#009900">&#40;</font>content<font color="#339933">,</font>&nbsp;eventName<font color="#339933">,</font>&nbsp;detail<font color="#339933">,</font>&nbsp;el<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		<font color="#000066">var</font>&nbsp;trigger&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">false</font><font color="#339933">;</font></li><li>		<font color="#000066">if</font><font color="#009900">&#40;</font>el<font color="#009900">&#41;</font>&nbsp;trigger&nbsp;<font color="#339933">=</font>&nbsp;el<font color="#339933">;</font></li><li>		<font color="#006600">//&nbsp;emit&nbsp;event&nbsp;with&nbsp;coordinates</font></li><li>		<font color="#000066">var</font>&nbsp;event&nbsp;<font color="#339933">=</font>&nbsp;<font color="#000066">new</font>&nbsp;CustomEvent<font color="#009900">&#40;</font>eventName<font color="#339933">,</font>&nbsp;<font color="#009900">&#123;</font>detail<font color="#339933">:</font>&nbsp;<font color="#009900">&#123;</font>x<font color="#339933">:</font>&nbsp;detail<font color="#009900">&#91;</font><font color="#CC0000">0</font><font color="#009900">&#93;</font><font color="#339933">,</font>&nbsp;y<font color="#339933">:</font>&nbsp;detail<font color="#009900">&#91;</font><font color="#CC0000">1</font><font color="#009900">&#93;</font><font color="#339933">,</font>&nbsp;origin<font color="#339933">:</font>&nbsp;trigger<font color="#009900">&#125;</font><font color="#009900">&#125;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		content.<font color="#660066">element</font>.<font color="#660066">dispatchEvent</font><font color="#009900">&#40;</font>event<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	<font color="#000066">function</font>&nbsp;getSign<font color="#009900">&#40;</font>x<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		<font color="#000066">if</font><font color="#009900">&#40;</font><font color="#339933">!</font><font>Math</font>.<font color="#660066">sign</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>			<font color="#000066">return</font>&nbsp;<font color="#009900">&#40;</font><font color="#009900">&#40;</font>x&nbsp;<font color="#339933">&gt;</font>&nbsp;<font color="#CC0000">0</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">-</font>&nbsp;<font color="#009900">&#40;</font>x&nbsp;<font color="#339933">&lt;</font>&nbsp;<font color="#CC0000">0</font><font color="#009900">&#41;</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">||</font>&nbsp;<font color="#339933">+</font>x<font color="#339933">;</font></li><li>		<font color="#009900">&#125;</font>&nbsp;<font color="#000066">else</font>&nbsp;<font color="#009900">&#123;</font></li><li>			<font color="#000066">return</font>&nbsp;<font>Math</font>.<font color="#660066">sign</font><font color="#009900">&#40;</font>x<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#009900">&#125;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	window.<font color="#660066">SwipeContent</font>&nbsp;<font color="#339933">=</font>&nbsp;SwipeContent<font color="#339933">;</font></li><li>&nbsp;</li><li>	<font color="#006600">//initialize&nbsp;the&nbsp;SwipeContent&nbsp;objects</font></li><li>	<font color="#000066">var</font>&nbsp;swipe&nbsp;<font color="#339933">=</font>&nbsp;document.<font color="#660066">getElementsByClassName</font><font color="#009900">&#40;</font><font color="#3366CC">'js-swipe-content'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>	<font color="#000066">if</font><font color="#009900">&#40;</font>&nbsp;swipe.<font color="#660066">length</font>&nbsp;<font color="#339933">&gt;</font>&nbsp;<font color="#CC0000">0</font>&nbsp;<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		<font color="#000066">for</font><font color="#009900">&#40;</font>&nbsp;<font color="#000066">var</font>&nbsp;i&nbsp;<font color="#339933">=</font>&nbsp;<font color="#CC0000">0</font><font color="#339933">;</font>&nbsp;i&nbsp;<font color="#339933">&lt;</font>&nbsp;swipe.<font color="#660066">length</font><font color="#339933">;</font>&nbsp;i<font color="#339933">++</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>			<font color="#009900">&#40;</font><font color="#000066">function</font><font color="#009900">&#40;</font>i<font color="#009900">&#41;</font><font color="#009900">&#123;</font><font color="#000066">new</font>&nbsp;SwipeContent<font color="#009900">&#40;</font>swipe<font color="#009900">&#91;</font>i<font color="#009900">&#93;</font><font color="#009900">&#41;</font><font color="#339933">;</font><font color="#009900">&#125;</font><font color="#009900">&#41;</font><font color="#009900">&#40;</font>i<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#009900">&#125;</font></li><li>	<font color="#009900">&#125;</font></li><li><font color="#009900">&#125;</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li></ol></blockquote></code></pre></div><!-- Coding Board --><br><br><!-- Coding Board --><div class="code-highlight"><div class="code-header margin-bottom-xs" style="text-align: right"><span class="file-name margin-bottom-md padding-sm padding-md@lg">JavaScript (_2_slideshow.js)</span> <button class="copy-button btn btn--sm btn--black radius-full"><svg stroke="currentColor" fill="none" stroke-width="2" viewbox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>&nbsp;Copy Code</button></div><pre class="code-snippet"><code class="language-javascript"><blockquote><ol><li><font color="#006600">//&nbsp;utility&nbsp;functions</font></li><li><font color="#000066">if</font><font color="#009900">&#40;</font><font color="#339933">!</font>Util<font color="#009900">&#41;</font>&nbsp;<font color="#000066">function</font>&nbsp;Util&nbsp;<font color="#009900">&#40;</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font><font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>Util.<font color="#660066">hasClass</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font>el<font color="#339933">,</font>&nbsp;className<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000066">return</font>&nbsp;el.<font color="#660066">classList</font>.<font color="#660066">contains</font><font color="#009900">&#40;</font>className<font color="#009900">&#41;</font><font color="#339933">;</font></li><li><font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>Util.<font color="#660066">addClass</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font>el<font color="#339933">,</font>&nbsp;className<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000066">var</font>&nbsp;classList&nbsp;<font color="#339933">=</font>&nbsp;className.<font color="#660066">split</font><font color="#009900">&#40;</font><font color="#3366CC">'&nbsp;'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;el.<font color="#660066">classList</font>.<font color="#660066">add</font><font color="#009900">&#40;</font>classList<font color="#009900">&#91;</font><font color="#CC0000">0</font><font color="#009900">&#93;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;<font color="#000066">if</font>&nbsp;<font color="#009900">&#40;</font>classList.<font color="#660066">length</font>&nbsp;<font color="#339933">&gt;</font>&nbsp;<font color="#CC0000">1</font><font color="#009900">&#41;</font>&nbsp;Util.<font color="#660066">addClass</font><font color="#009900">&#40;</font>el<font color="#339933">,</font>&nbsp;classList.<font color="#660066">slice</font><font color="#009900">&#40;</font><font color="#CC0000">1</font><font color="#009900">&#41;</font>.<font color="#660066">join</font><font color="#009900">&#40;</font><font color="#3366CC">'&nbsp;'</font><font color="#009900">&#41;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li><font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>Util.<font color="#660066">removeClass</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font>el<font color="#339933">,</font>&nbsp;className<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000066">var</font>&nbsp;classList&nbsp;<font color="#339933">=</font>&nbsp;className.<font color="#660066">split</font><font color="#009900">&#40;</font><font color="#3366CC">'&nbsp;'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;el.<font color="#660066">classList</font>.<font color="#660066">remove</font><font color="#009900">&#40;</font>classList<font color="#009900">&#91;</font><font color="#CC0000">0</font><font color="#009900">&#93;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;<font color="#000066">if</font>&nbsp;<font color="#009900">&#40;</font>classList.<font color="#660066">length</font>&nbsp;<font color="#339933">&gt;</font>&nbsp;<font color="#CC0000">1</font><font color="#009900">&#41;</font>&nbsp;Util.<font color="#660066">removeClass</font><font color="#009900">&#40;</font>el<font color="#339933">,</font>&nbsp;classList.<font color="#660066">slice</font><font color="#009900">&#40;</font><font color="#CC0000">1</font><font color="#009900">&#41;</font>.<font color="#660066">join</font><font color="#009900">&#40;</font><font color="#3366CC">'&nbsp;'</font><font color="#009900">&#41;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li><font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>Util.<font color="#660066">setAttributes</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font>el<font color="#339933">,</font>&nbsp;attrs<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000066">for</font><font color="#009900">&#40;</font><font color="#000066">var</font>&nbsp;key&nbsp;<font color="#000066">in</font>&nbsp;attrs<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;el.<font color="#660066">setAttribute</font><font color="#009900">&#40;</font>key<font color="#339933">,</font>&nbsp;attrs<font color="#009900">&#91;</font>key<font color="#009900">&#93;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;<font color="#009900">&#125;</font></li><li><font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>Util.<font color="#660066">moveFocus</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#000066">function</font>&nbsp;<font color="#009900">&#40;</font>element<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000066">if</font><font color="#009900">&#40;</font>&nbsp;<font color="#339933">!</font>element&nbsp;<font color="#009900">&#41;</font>&nbsp;element&nbsp;<font color="#339933">=</font>&nbsp;document.<font color="#660066">getElementsByTagName</font><font color="#009900">&#40;</font><font color="#3366CC">'body'</font><font color="#009900">&#41;</font><font color="#009900">&#91;</font><font color="#CC0000">0</font><font color="#009900">&#93;</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;element.<font color="#660066">focus</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;<font color="#000066">if</font>&nbsp;<font color="#009900">&#40;</font>document.<font color="#660066">activeElement</font>&nbsp;<font color="#339933">!==</font>&nbsp;element<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;element.<font color="#660066">setAttribute</font><font color="#009900">&#40;</font><font color="#3366CC">'tabindex'</font><font color="#339933">,</font><font color="#3366CC">'-1'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;element.<font color="#660066">focus</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;<font color="#009900">&#125;</font></li><li><font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>Util.<font color="#660066">getIndexInArray</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font>array<font color="#339933">,</font>&nbsp;el<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000066">return</font>&nbsp;<font>Array</font>.<font color="#000066">prototype</font>.<font color="#660066">indexOf</font>.<font color="#660066">call</font><font color="#009900">&#40;</font>array<font color="#339933">,</font>&nbsp;el<font color="#009900">&#41;</font><font color="#339933">;</font></li><li><font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>Util.<font color="#660066">cssSupports</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font>property<font color="#339933">,</font>&nbsp;value<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000066">return</font>&nbsp;CSS.<font color="#660066">supports</font><font color="#009900">&#40;</font>property<font color="#339933">,</font>&nbsp;value<font color="#009900">&#41;</font><font color="#339933">;</font></li><li><font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>Util.<font color="#660066">extend</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>&nbsp;&nbsp;<font color="#000066">var</font>&nbsp;extended&nbsp;<font color="#339933">=</font>&nbsp;<font color="#009900">&#123;</font><font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;<font color="#000066">var</font>&nbsp;deep&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">false</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;<font color="#000066">var</font>&nbsp;i&nbsp;<font color="#339933">=</font>&nbsp;<font color="#CC0000">0</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;<font color="#000066">var</font>&nbsp;length&nbsp;<font color="#339933">=</font>&nbsp;arguments.<font color="#660066">length</font><font color="#339933">;</font></li><li>&nbsp;</li><li>&nbsp;&nbsp;<font color="#000066">if</font>&nbsp;<font color="#009900">&#40;</font>&nbsp;<font>Object</font>.<font color="#000066">prototype</font>.<font color="#660066">toString</font>.<font color="#660066">call</font><font color="#009900">&#40;</font>&nbsp;arguments<font color="#009900">&#91;</font><font color="#CC0000">0</font><font color="#009900">&#93;</font>&nbsp;<font color="#009900">&#41;</font>&nbsp;<font color="#339933">===</font>&nbsp;<font color="#3366CC">'[object&nbsp;Boolean]'</font>&nbsp;<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;deep&nbsp;<font color="#339933">=</font>&nbsp;arguments<font color="#009900">&#91;</font><font color="#CC0000">0</font><font color="#009900">&#93;</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;i<font color="#339933">++;</font></li><li>&nbsp;&nbsp;<font color="#009900">&#125;</font></li><li>&nbsp;</li><li>&nbsp;&nbsp;<font color="#000066">var</font>&nbsp;merge&nbsp;<font color="#339933">=</font>&nbsp;<font color="#000066">function</font>&nbsp;<font color="#009900">&#40;</font>obj<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000066">for</font>&nbsp;<font color="#009900">&#40;</font>&nbsp;<font color="#000066">var</font>&nbsp;prop&nbsp;<font color="#000066">in</font>&nbsp;obj&nbsp;<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000066">if</font>&nbsp;<font color="#009900">&#40;</font>&nbsp;<font>Object</font>.<font color="#000066">prototype</font>.<font color="#000066">hasOwnProperty</font>.<font color="#660066">call</font><font color="#009900">&#40;</font>&nbsp;obj<font color="#339933">,</font>&nbsp;prop&nbsp;<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000066">if</font>&nbsp;<font color="#009900">&#40;</font>&nbsp;deep&nbsp;<font color="#339933">&amp;&amp;</font>&nbsp;<font>Object</font>.<font color="#000066">prototype</font>.<font color="#660066">toString</font>.<font color="#660066">call</font><font color="#009900">&#40;</font>obj<font color="#009900">&#91;</font>prop<font color="#009900">&#93;</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">===</font>&nbsp;<font color="#3366CC">'[object&nbsp;Object]'</font>&nbsp;<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;extended<font color="#009900">&#91;</font>prop<font color="#009900">&#93;</font>&nbsp;<font color="#339933">=</font>&nbsp;extend<font color="#009900">&#40;</font>&nbsp;<font color="#003366">true</font><font color="#339933">,</font>&nbsp;extended<font color="#009900">&#91;</font>prop<font color="#009900">&#93;</font><font color="#339933">,</font>&nbsp;obj<font color="#009900">&#91;</font>prop<font color="#009900">&#93;</font>&nbsp;<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">&#125;</font>&nbsp;<font color="#000066">else</font>&nbsp;<font color="#009900">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;extended<font color="#009900">&#91;</font>prop<font color="#009900">&#93;</font>&nbsp;<font color="#339933">=</font>&nbsp;obj<font color="#009900">&#91;</font>prop<font color="#009900">&#93;</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">&#125;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">&#125;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">&#125;</font></li><li>&nbsp;&nbsp;<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>&nbsp;&nbsp;<font color="#000066">for</font>&nbsp;<font color="#009900">&#40;</font>&nbsp;<font color="#339933">;</font>&nbsp;i&nbsp;<font color="#339933">&lt;</font>&nbsp;length<font color="#339933">;</font>&nbsp;i<font color="#339933">++</font>&nbsp;<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000066">var</font>&nbsp;obj&nbsp;<font color="#339933">=</font>&nbsp;arguments<font color="#009900">&#91;</font>i<font color="#009900">&#93;</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;merge<font color="#009900">&#40;</font>obj<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;<font color="#009900">&#125;</font></li><li>&nbsp;</li><li>&nbsp;&nbsp;<font color="#000066">return</font>&nbsp;extended<font color="#339933">;</font></li><li><font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li><font color="#006600">//&nbsp;File#:&nbsp;_2_slideshow</font></li><li><font color="#009900">&#40;</font><font color="#000066">function</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>	<font color="#000066">var</font>&nbsp;Slideshow&nbsp;<font color="#339933">=</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font>opts<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		<font color="#000066">this</font>.<font color="#660066">options</font>&nbsp;<font color="#339933">=</font>&nbsp;Util.<font color="#660066">extend</font><font color="#009900">&#40;</font>Slideshow.<font color="#660066">defaults</font>&nbsp;<font color="#339933">,</font>&nbsp;opts<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#000066">this</font>.<font color="#660066">element</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#000066">this</font>.<font color="#660066">options</font>.<font color="#660066">element</font><font color="#339933">;</font></li><li>		<font color="#000066">this</font>.<font color="#660066">items</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#000066">this</font>.<font color="#660066">element</font>.<font color="#660066">getElementsByClassName</font><font color="#009900">&#40;</font><font color="#3366CC">'js-slideshow__item'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#000066">this</font>.<font color="#660066">controls</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#000066">this</font>.<font color="#660066">element</font>.<font color="#660066">getElementsByClassName</font><font color="#009900">&#40;</font><font color="#3366CC">'js-slideshow__control'</font><font color="#009900">&#41;</font><font color="#339933">;</font>&nbsp;</li><li>		<font color="#000066">this</font>.<font color="#660066">selectedSlide</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#CC0000">0</font><font color="#339933">;</font></li><li>		<font color="#000066">this</font>.<font color="#660066">autoplayId</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">false</font><font color="#339933">;</font></li><li>		<font color="#000066">this</font>.<font color="#660066">autoplayPaused</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">false</font><font color="#339933">;</font></li><li>		<font color="#000066">this</font>.<font color="#660066">navigation</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">false</font><font color="#339933">;</font></li><li>		<font color="#000066">this</font>.<font color="#660066">navCurrentLabel</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">false</font><font color="#339933">;</font></li><li>		<font color="#000066">this</font>.<font color="#660066">ariaLive</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">false</font><font color="#339933">;</font></li><li>		<font color="#000066">this</font>.<font color="#660066">moveFocus</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">false</font><font color="#339933">;</font></li><li>		<font color="#000066">this</font>.<font color="#660066">animating</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">false</font><font color="#339933">;</font></li><li>		<font color="#000066">this</font>.<font color="#660066">supportAnimation</font>&nbsp;<font color="#339933">=</font>&nbsp;Util.<font color="#660066">cssSupports</font><font color="#009900">&#40;</font><font color="#3366CC">'transition'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#000066">this</font>.<font color="#660066">animationOff</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#009900">&#40;</font><font color="#339933">!</font>Util.<font color="#660066">hasClass</font><font color="#009900">&#40;</font><font color="#000066">this</font>.<font color="#660066">element</font><font color="#339933">,</font>&nbsp;<font color="#3366CC">'slideshow--transition-fade'</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">&amp;&amp;</font>&nbsp;<font color="#339933">!</font>Util.<font color="#660066">hasClass</font><font color="#009900">&#40;</font><font color="#000066">this</font>.<font color="#660066">element</font><font color="#339933">,</font>&nbsp;<font color="#3366CC">'slideshow--transition-slide'</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">&amp;&amp;</font>&nbsp;<font color="#339933">!</font>Util.<font color="#660066">hasClass</font><font color="#009900">&#40;</font><font color="#000066">this</font>.<font color="#660066">element</font><font color="#339933">,</font>&nbsp;<font color="#3366CC">'slideshow--transition-prx'</font><font color="#009900">&#41;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#000066">this</font>.<font color="#660066">animationType</font>&nbsp;<font color="#339933">=</font>&nbsp;Util.<font color="#660066">hasClass</font><font color="#009900">&#40;</font><font color="#000066">this</font>.<font color="#660066">element</font><font color="#339933">,</font>&nbsp;<font color="#3366CC">'slideshow--transition-prx'</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">?</font>&nbsp;<font color="#3366CC">'prx'</font>&nbsp;<font color="#339933">:</font>&nbsp;<font color="#3366CC">'slide'</font><font color="#339933">;</font></li><li>		<font color="#000066">this</font>.<font color="#660066">animatingClass</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#3366CC">'slideshow--is-animating'</font><font color="#339933">;</font></li><li>		initSlideshow<font color="#009900">&#40;</font><font color="#000066">this</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		initSlideshowEvents<font color="#009900">&#40;</font><font color="#000066">this</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		initAnimationEndEvents<font color="#009900">&#40;</font><font color="#000066">this</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	Slideshow.<font color="#000066">prototype</font>.<font color="#660066">showNext</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		showNewItem<font color="#009900">&#40;</font><font color="#000066">this</font><font color="#339933">,</font>&nbsp;<font color="#000066">this</font>.<font color="#660066">selectedSlide</font>&nbsp;<font color="#339933">+</font>&nbsp;<font color="#CC0000">1</font><font color="#339933">,</font>&nbsp;<font color="#3366CC">'next'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	Slideshow.<font color="#000066">prototype</font>.<font color="#660066">showPrev</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		showNewItem<font color="#009900">&#40;</font><font color="#000066">this</font><font color="#339933">,</font>&nbsp;<font color="#000066">this</font>.<font color="#660066">selectedSlide</font>&nbsp;<font color="#339933">-</font>&nbsp;<font color="#CC0000">1</font><font color="#339933">,</font>&nbsp;<font color="#3366CC">'prev'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	Slideshow.<font color="#000066">prototype</font>.<font color="#660066">showItem</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font>index<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		showNewItem<font color="#009900">&#40;</font><font color="#000066">this</font><font color="#339933">,</font>&nbsp;index<font color="#339933">,</font>&nbsp;<font color="#003366">false</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	Slideshow.<font color="#000066">prototype</font>.<font color="#660066">startAutoplay</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		<font color="#000066">var</font>&nbsp;self&nbsp;<font color="#339933">=</font>&nbsp;<font color="#000066">this</font><font color="#339933">;</font></li><li>		<font color="#000066">if</font><font color="#009900">&#40;</font><font color="#000066">this</font>.<font color="#660066">options</font>.<font color="#660066">autoplay</font>&nbsp;<font color="#339933">&amp;&amp;</font>&nbsp;<font color="#339933">!</font><font color="#000066">this</font>.<font color="#660066">autoplayId</font>&nbsp;<font color="#339933">&amp;&amp;</font>&nbsp;<font color="#339933">!</font><font color="#000066">this</font>.<font color="#660066">autoplayPaused</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>			self.<font color="#660066">autoplayId</font>&nbsp;<font color="#339933">=</font>&nbsp;setInterval<font color="#009900">&#40;</font><font color="#000066">function</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font><font color="#009900">&#123;</font></li><li>				self.<font color="#660066">showNext</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			<font color="#009900">&#125;</font><font color="#339933">,</font>&nbsp;self.<font color="#660066">options</font>.<font color="#660066">autoplayInterval</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#009900">&#125;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	Slideshow.<font color="#000066">prototype</font>.<font color="#660066">pauseAutoplay</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		<font color="#000066">var</font>&nbsp;self&nbsp;<font color="#339933">=</font>&nbsp;<font color="#000066">this</font><font color="#339933">;</font></li><li>		<font color="#000066">if</font><font color="#009900">&#40;</font><font color="#000066">this</font>.<font color="#660066">options</font>.<font color="#660066">autoplay</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>			clearInterval<font color="#009900">&#40;</font>self.<font color="#660066">autoplayId</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			self.<font color="#660066">autoplayId</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">false</font><font color="#339933">;</font></li><li>		<font color="#009900">&#125;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	<font color="#000066">function</font>&nbsp;initSlideshow<font color="#009900">&#40;</font>slideshow<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font>&nbsp;<font color="#006600">//&nbsp;basic&nbsp;slideshow&nbsp;settings</font></li><li>		<font color="#006600">//&nbsp;if&nbsp;no&nbsp;slide&nbsp;has&nbsp;been&nbsp;selected&nbsp;-&gt;&nbsp;select&nbsp;the&nbsp;first&nbsp;one</font></li><li>		<font color="#000066">if</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">element</font>.<font color="#660066">getElementsByClassName</font><font color="#009900">&#40;</font><font color="#3366CC">'slideshow__item--selected'</font><font color="#009900">&#41;</font>.<font color="#660066">length</font>&nbsp;<font color="#339933">&lt;</font>&nbsp;<font color="#CC0000">1</font><font color="#009900">&#41;</font>&nbsp;Util.<font color="#660066">addClass</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">items</font><font color="#009900">&#91;</font><font color="#CC0000">0</font><font color="#009900">&#93;</font><font color="#339933">,</font>&nbsp;<font color="#3366CC">'slideshow__item--selected'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		slideshow.<font color="#660066">selectedSlide</font>&nbsp;<font color="#339933">=</font>&nbsp;Util.<font color="#660066">getIndexInArray</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">items</font><font color="#339933">,</font>&nbsp;slideshow.<font color="#660066">element</font>.<font color="#660066">getElementsByClassName</font><font color="#009900">&#40;</font><font color="#3366CC">'slideshow__item--selected'</font><font color="#009900">&#41;</font><font color="#009900">&#91;</font><font color="#CC0000">0</font><font color="#009900">&#93;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#006600">//&nbsp;create&nbsp;an&nbsp;element&nbsp;that&nbsp;will&nbsp;be&nbsp;used&nbsp;to&nbsp;announce&nbsp;the&nbsp;new&nbsp;visible&nbsp;slide&nbsp;to&nbsp;SR</font></li><li>		<font color="#000066">var</font>&nbsp;srLiveArea&nbsp;<font color="#339933">=</font>&nbsp;document.<font color="#660066">createElement</font><font color="#009900">&#40;</font><font color="#3366CC">'div'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		Util.<font color="#660066">setAttributes</font><font color="#009900">&#40;</font>srLiveArea<font color="#339933">,</font>&nbsp;<font color="#009900">&#123;</font><font color="#3366CC">'class'</font><font color="#339933">:</font>&nbsp;<font color="#3366CC">'sq7-sr-only&nbsp;js-slideshow__aria-live'</font><font color="#339933">,</font>&nbsp;<font color="#3366CC">'aria-live'</font><font color="#339933">:</font>&nbsp;<font color="#3366CC">'polite'</font><font color="#339933">,</font>&nbsp;<font color="#3366CC">'aria-atomic'</font><font color="#339933">:</font>&nbsp;<font color="#3366CC">'true'</font><font color="#009900">&#125;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		slideshow.<font color="#660066">element</font>.<font color="#660066">appendChild</font><font color="#009900">&#40;</font>srLiveArea<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		slideshow.<font color="#660066">ariaLive</font>&nbsp;<font color="#339933">=</font>&nbsp;srLiveArea<font color="#339933">;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	<font color="#000066">function</font>&nbsp;initSlideshowEvents<font color="#009900">&#40;</font>slideshow<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		<font color="#006600">//&nbsp;if&nbsp;slideshow&nbsp;navigation&nbsp;is&nbsp;on&nbsp;-&gt;&nbsp;create&nbsp;navigation&nbsp;HTML&nbsp;and&nbsp;add&nbsp;event&nbsp;listeners</font></li><li>		<font color="#000066">if</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">options</font>.<font color="#660066">navigation</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>			<font color="#006600">//&nbsp;check&nbsp;if&nbsp;navigation&nbsp;has&nbsp;already&nbsp;been&nbsp;included</font></li><li>			<font color="#000066">if</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">element</font>.<font color="#660066">getElementsByClassName</font><font color="#009900">&#40;</font><font color="#3366CC">'js-slideshow__navigation'</font><font color="#009900">&#41;</font>.<font color="#660066">length</font>&nbsp;<font color="#339933">==</font>&nbsp;<font color="#CC0000">0</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>				<font color="#000066">var</font>&nbsp;navigation&nbsp;<font color="#339933">=</font>&nbsp;document.<font color="#660066">createElement</font><font color="#009900">&#40;</font><font color="#3366CC">'ol'</font><font color="#009900">&#41;</font><font color="#339933">,</font></li><li>					navChildren&nbsp;<font color="#339933">=</font>&nbsp;<font color="#3366CC">''</font><font color="#339933">;</font></li><li>&nbsp;</li><li>				<font color="#000066">var</font>&nbsp;navClasses&nbsp;<font color="#339933">=</font>&nbsp;slideshow.<font color="#660066">options</font>.<font color="#660066">navigationClass</font><font color="#339933">+</font><font color="#3366CC">'&nbsp;js-slideshow__navigation'</font><font color="#339933">;</font></li><li>				<font color="#000066">if</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">items</font>.<font color="#660066">length</font>&nbsp;<font color="#339933">&lt;=</font>&nbsp;<font color="#CC0000">1</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>					navClasses&nbsp;<font color="#339933">=</font>&nbsp;navClasses&nbsp;<font color="#339933">+</font>&nbsp;<font color="#3366CC">'&nbsp;sq7-hide'</font><font color="#339933">;</font></li><li>				<font color="#009900">&#125;</font></li><li>&nbsp;</li><li>				navigation.<font color="#660066">setAttribute</font><font color="#009900">&#40;</font><font color="#3366CC">'class'</font><font color="#339933">,</font>&nbsp;navClasses<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>				<font color="#000066">for</font><font color="#009900">&#40;</font><font color="#000066">var</font>&nbsp;i&nbsp;<font color="#339933">=</font>&nbsp;<font color="#CC0000">0</font><font color="#339933">;</font>&nbsp;i&nbsp;<font color="#339933">&lt;</font>&nbsp;slideshow.<font color="#660066">items</font>.<font color="#660066">length</font><font color="#339933">;</font>&nbsp;i<font color="#339933">++</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>					<font color="#000066">var</font>&nbsp;className&nbsp;<font color="#339933">=</font>&nbsp;<font color="#009900">&#40;</font>i&nbsp;<font color="#339933">==</font>&nbsp;slideshow.<font color="#660066">selectedSlide</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">?</font>&nbsp;<font color="#3366CC">'class=&quot;'</font><font color="#339933">+</font>slideshow.<font color="#660066">options</font>.<font color="#660066">navigationItemClass</font><font color="#339933">+</font><font color="#3366CC">'&nbsp;'</font><font color="#339933">+</font>slideshow.<font color="#660066">options</font>.<font color="#660066">navigationItemClass</font><font color="#339933">+</font><font color="#3366CC">'--selected&nbsp;js-slideshow__nav-item&quot;'</font>&nbsp;<font color="#339933">:</font>&nbsp;&nbsp;<font color="#3366CC">'class=&quot;'</font><font color="#339933">+</font>slideshow.<font color="#660066">options</font>.<font color="#660066">navigationItemClass</font><font color="#339933">+</font><font color="#3366CC">'&nbsp;js-slideshow__nav-item&quot;'</font><font color="#339933">,</font></li><li>						navCurrentLabel&nbsp;<font color="#339933">=</font>&nbsp;<font color="#009900">&#40;</font>i&nbsp;<font color="#339933">==</font>&nbsp;slideshow.<font color="#660066">selectedSlide</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">?</font>&nbsp;<font color="#3366CC">'&lt;span&nbsp;class=&quot;sq7-sr-only&nbsp;js-slideshow__nav-current-label&quot;&gt;Current&nbsp;Item&lt;/span&gt;'</font>&nbsp;<font color="#339933">:</font>&nbsp;<font color="#3366CC">''</font><font color="#339933">;</font></li><li>					navChildren&nbsp;<font color="#339933">=</font>&nbsp;navChildren&nbsp;<font color="#339933">+</font>&nbsp;<font color="#3366CC">'&lt;li&nbsp;'</font><font color="#339933">+</font>className<font color="#339933">+</font><font color="#3366CC">'&gt;&lt;button&gt;&lt;span&nbsp;class=&quot;sq7-sr-only&quot;&gt;'</font><font color="#339933">+</font>&nbsp;<font color="#009900">&#40;</font>i<font color="#339933">+</font><font color="#CC0000">1</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">+</font>&nbsp;<font color="#3366CC">'&lt;/span&gt;'</font><font color="#339933">+</font>navCurrentLabel<font color="#339933">+</font><font color="#3366CC">'&lt;/button&gt;&lt;/li&gt;'</font><font color="#339933">;</font></li><li>				<font color="#009900">&#125;</font></li><li>				navigation.<font color="#660066">innerHTML</font>&nbsp;<font color="#339933">=</font>&nbsp;navChildren<font color="#339933">;</font></li><li>				slideshow.<font color="#660066">element</font>.<font color="#660066">appendChild</font><font color="#009900">&#40;</font>navigation<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			<font color="#009900">&#125;</font></li><li>&nbsp;</li><li>			slideshow.<font color="#660066">navCurrentLabel</font>&nbsp;<font color="#339933">=</font>&nbsp;slideshow.<font color="#660066">element</font>.<font color="#660066">getElementsByClassName</font><font color="#009900">&#40;</font><font color="#3366CC">'js-slideshow__nav-current-label'</font><font color="#009900">&#41;</font><font color="#009900">&#91;</font><font color="#CC0000">0</font><font color="#009900">&#93;</font><font color="#339933">;</font>&nbsp;</li><li>			slideshow.<font color="#660066">navigation</font>&nbsp;<font color="#339933">=</font>&nbsp;slideshow.<font color="#660066">element</font>.<font color="#660066">getElementsByClassName</font><font color="#009900">&#40;</font><font color="#3366CC">'js-slideshow__nav-item'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>			<font color="#000066">var</font>&nbsp;dotsNavigation&nbsp;<font color="#339933">=</font>&nbsp;slideshow.<font color="#660066">element</font>.<font color="#660066">getElementsByClassName</font><font color="#009900">&#40;</font><font color="#3366CC">'js-slideshow__navigation'</font><font color="#009900">&#41;</font><font color="#009900">&#91;</font><font color="#CC0000">0</font><font color="#009900">&#93;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>			dotsNavigation.<font color="#660066">addEventListener</font><font color="#009900">&#40;</font><font color="#3366CC">'click'</font><font color="#339933">,</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font>event<font color="#009900">&#41;</font><font color="#009900">&#123;</font></li><li>				navigateSlide<font color="#009900">&#40;</font>slideshow<font color="#339933">,</font>&nbsp;event<font color="#339933">,</font>&nbsp;<font color="#003366">true</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			<font color="#009900">&#125;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			dotsNavigation.<font color="#660066">addEventListener</font><font color="#009900">&#40;</font><font color="#3366CC">'keyup'</font><font color="#339933">,</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font>event<font color="#009900">&#41;</font><font color="#009900">&#123;</font></li><li>				navigateSlide<font color="#009900">&#40;</font>slideshow<font color="#339933">,</font>&nbsp;event<font color="#339933">,</font>&nbsp;<font color="#009900">&#40;</font>event.<font color="#660066">key</font>.<font color="#660066">toLowerCase</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">==</font>&nbsp;<font color="#3366CC">'enter'</font><font color="#009900">&#41;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			<font color="#009900">&#125;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#009900">&#125;</font></li><li>		<font color="#006600">//&nbsp;slideshow&nbsp;arrow&nbsp;controls</font></li><li>		<font color="#000066">if</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">controls</font>.<font color="#660066">length</font>&nbsp;<font color="#339933">&gt;</font>&nbsp;<font color="#CC0000">0</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>			<font color="#006600">//&nbsp;hide&nbsp;controls&nbsp;if&nbsp;one&nbsp;item&nbsp;available</font></li><li>			<font color="#000066">if</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">items</font>.<font color="#660066">length</font>&nbsp;<font color="#339933">&lt;=</font>&nbsp;<font color="#CC0000">1</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>				Util.<font color="#660066">addClass</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">controls</font><font color="#009900">&#91;</font><font color="#CC0000">0</font><font color="#009900">&#93;</font><font color="#339933">,</font>&nbsp;<font color="#3366CC">'sq7-hide'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>				Util.<font color="#660066">addClass</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">controls</font><font color="#009900">&#91;</font><font color="#CC0000">1</font><font color="#009900">&#93;</font><font color="#339933">,</font>&nbsp;<font color="#3366CC">'sq7-hide'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			<font color="#009900">&#125;</font></li><li>			slideshow.<font color="#660066">controls</font><font color="#009900">&#91;</font><font color="#CC0000">0</font><font color="#009900">&#93;</font>.<font color="#660066">addEventListener</font><font color="#009900">&#40;</font><font color="#3366CC">'click'</font><font color="#339933">,</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font>event<font color="#009900">&#41;</font><font color="#009900">&#123;</font></li><li>				event.<font color="#660066">preventDefault</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>				slideshow.<font color="#660066">showPrev</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>				updateAriaLive<font color="#009900">&#40;</font>slideshow<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			<font color="#009900">&#125;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			slideshow.<font color="#660066">controls</font><font color="#009900">&#91;</font><font color="#CC0000">1</font><font color="#009900">&#93;</font>.<font color="#660066">addEventListener</font><font color="#009900">&#40;</font><font color="#3366CC">'click'</font><font color="#339933">,</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font>event<font color="#009900">&#41;</font><font color="#009900">&#123;</font></li><li>				event.<font color="#660066">preventDefault</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>				slideshow.<font color="#660066">showNext</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>				updateAriaLive<font color="#009900">&#40;</font>slideshow<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			<font color="#009900">&#125;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#009900">&#125;</font></li><li>		<font color="#006600">//&nbsp;swipe&nbsp;events</font></li><li>		<font color="#000066">if</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">options</font>.<font color="#660066">swipe</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>			<font color="#006600">//init&nbsp;swipe</font></li><li>			<font color="#000066">new</font>&nbsp;SwipeContent<font color="#009900">&#40;</font>slideshow.<font color="#660066">element</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			slideshow.<font color="#660066">element</font>.<font color="#660066">addEventListener</font><font color="#009900">&#40;</font><font color="#3366CC">'swipeLeft'</font><font color="#339933">,</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font>event<font color="#009900">&#41;</font><font color="#009900">&#123;</font></li><li>				slideshow.<font color="#660066">showNext</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			<font color="#009900">&#125;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			slideshow.<font color="#660066">element</font>.<font color="#660066">addEventListener</font><font color="#009900">&#40;</font><font color="#3366CC">'swipeRight'</font><font color="#339933">,</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font>event<font color="#009900">&#41;</font><font color="#009900">&#123;</font></li><li>				slideshow.<font color="#660066">showPrev</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			<font color="#009900">&#125;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#009900">&#125;</font></li><li>		<font color="#006600">//&nbsp;autoplay</font></li><li>		<font color="#000066">if</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">options</font>.<font color="#660066">autoplay</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>			slideshow.<font color="#660066">startAutoplay</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			<font color="#006600">//&nbsp;pause&nbsp;autoplay&nbsp;if&nbsp;user&nbsp;is&nbsp;interacting&nbsp;with&nbsp;the&nbsp;slideshow</font></li><li>			<font color="#000066">if</font><font color="#009900">&#40;</font><font color="#339933">!</font>slideshow.<font color="#660066">options</font>.<font color="#660066">autoplayOnHover</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>				slideshow.<font color="#660066">element</font>.<font color="#660066">addEventListener</font><font color="#009900">&#40;</font><font color="#3366CC">'mouseenter'</font><font color="#339933">,</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font>event<font color="#009900">&#41;</font><font color="#009900">&#123;</font></li><li>					slideshow.<font color="#660066">pauseAutoplay</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>					slideshow.<font color="#660066">autoplayPaused</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">true</font><font color="#339933">;</font></li><li>				<font color="#009900">&#125;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>				slideshow.<font color="#660066">element</font>.<font color="#660066">addEventListener</font><font color="#009900">&#40;</font><font color="#3366CC">'mouseleave'</font><font color="#339933">,</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font>event<font color="#009900">&#41;</font><font color="#009900">&#123;</font></li><li>					slideshow.<font color="#660066">autoplayPaused</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">false</font><font color="#339933">;</font></li><li>					slideshow.<font color="#660066">startAutoplay</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>				<font color="#009900">&#125;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			<font color="#009900">&#125;</font></li><li>			<font color="#000066">if</font><font color="#009900">&#40;</font><font color="#339933">!</font>slideshow.<font color="#660066">options</font>.<font color="#660066">autoplayOnFocus</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>				slideshow.<font color="#660066">element</font>.<font color="#660066">addEventListener</font><font color="#009900">&#40;</font><font color="#3366CC">'focusin'</font><font color="#339933">,</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font>event<font color="#009900">&#41;</font><font color="#009900">&#123;</font></li><li>					slideshow.<font color="#660066">pauseAutoplay</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>					slideshow.<font color="#660066">autoplayPaused</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">true</font><font color="#339933">;</font></li><li>				<font color="#009900">&#125;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>				slideshow.<font color="#660066">element</font>.<font color="#660066">addEventListener</font><font color="#009900">&#40;</font><font color="#3366CC">'focusout'</font><font color="#339933">,</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font>event<font color="#009900">&#41;</font><font color="#009900">&#123;</font></li><li>					slideshow.<font color="#660066">autoplayPaused</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">false</font><font color="#339933">;</font></li><li>					slideshow.<font color="#660066">startAutoplay</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>				<font color="#009900">&#125;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			<font color="#009900">&#125;</font></li><li>		<font color="#009900">&#125;</font></li><li>		<font color="#006600">//&nbsp;detect&nbsp;if&nbsp;external&nbsp;buttons&nbsp;control&nbsp;the&nbsp;slideshow</font></li><li>		<font color="#000066">var</font>&nbsp;slideshowId&nbsp;<font color="#339933">=</font>&nbsp;slideshow.<font color="#660066">element</font>.<font color="#660066">getAttribute</font><font color="#009900">&#40;</font><font color="#3366CC">'id'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#000066">if</font><font color="#009900">&#40;</font>slideshowId<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>			<font color="#000066">var</font>&nbsp;externalControls&nbsp;<font color="#339933">=</font>&nbsp;document.<font color="#660066">querySelectorAll</font><font color="#009900">&#40;</font><font color="#3366CC">'[data-controls=&quot;'</font><font color="#339933">+</font>slideshowId<font color="#339933">+</font><font color="#3366CC">'&quot;]'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			<font color="#000066">for</font><font color="#009900">&#40;</font><font color="#000066">var</font>&nbsp;i&nbsp;<font color="#339933">=</font>&nbsp;<font color="#CC0000">0</font><font color="#339933">;</font>&nbsp;i&nbsp;<font color="#339933">&lt;</font>&nbsp;externalControls.<font color="#660066">length</font><font color="#339933">;</font>&nbsp;i<font color="#339933">++</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>				<font color="#009900">&#40;</font><font color="#000066">function</font><font color="#009900">&#40;</font>i<font color="#009900">&#41;</font><font color="#009900">&#123;</font>externalControlSlide<font color="#009900">&#40;</font>slideshow<font color="#339933">,</font>&nbsp;externalControls<font color="#009900">&#91;</font>i<font color="#009900">&#93;</font><font color="#009900">&#41;</font><font color="#339933">;</font><font color="#009900">&#125;</font><font color="#009900">&#41;</font><font color="#009900">&#40;</font>i<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			<font color="#009900">&#125;</font></li><li>		<font color="#009900">&#125;</font></li><li>		<font color="#006600">//&nbsp;custom&nbsp;event&nbsp;to&nbsp;trigger&nbsp;selection&nbsp;of&nbsp;a&nbsp;new&nbsp;slide&nbsp;element</font></li><li>		slideshow.<font color="#660066">element</font>.<font color="#660066">addEventListener</font><font color="#009900">&#40;</font><font color="#3366CC">'selectNewItem'</font><font color="#339933">,</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font>event<font color="#009900">&#41;</font><font color="#009900">&#123;</font></li><li>			<font color="#006600">//&nbsp;check&nbsp;if&nbsp;slide&nbsp;is&nbsp;already&nbsp;selected</font></li><li>			<font color="#000066">if</font><font color="#009900">&#40;</font>event.<font color="#660066">detail</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>				<font color="#000066">if</font><font color="#009900">&#40;</font>event.<font color="#660066">detail</font>&nbsp;<font color="#339933">-</font>&nbsp;<font color="#CC0000">1</font>&nbsp;<font color="#339933">==</font>&nbsp;slideshow.<font color="#660066">selectedSlide</font><font color="#009900">&#41;</font>&nbsp;<font color="#000066">return</font><font color="#339933">;</font></li><li>				showNewItem<font color="#009900">&#40;</font>slideshow<font color="#339933">,</font>&nbsp;event.<font color="#660066">detail</font>&nbsp;<font color="#339933">-</font>&nbsp;<font color="#CC0000">1</font><font color="#339933">,</font>&nbsp;<font color="#003366">false</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			<font color="#009900">&#125;</font></li><li>		<font color="#009900">&#125;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>		<font color="#006600">//&nbsp;keyboard&nbsp;navigation</font></li><li>		slideshow.<font color="#660066">element</font>.<font color="#660066">addEventListener</font><font color="#009900">&#40;</font><font color="#3366CC">'keydown'</font><font color="#339933">,</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font>event<font color="#009900">&#41;</font><font color="#009900">&#123;</font></li><li>			<font color="#000066">if</font><font color="#009900">&#40;</font>event.<font color="#660066">keyCode</font>&nbsp;<font color="#339933">&amp;&amp;</font>&nbsp;event.<font color="#660066">keyCode</font>&nbsp;<font color="#339933">==</font>&nbsp;<font color="#CC0000">39</font>&nbsp;<font color="#339933">||</font>&nbsp;event.<font color="#660066">key</font>&nbsp;<font color="#339933">&amp;&amp;</font>&nbsp;event.<font color="#660066">key</font>.<font color="#660066">toLowerCase</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">==</font>&nbsp;<font color="#3366CC">'arrowright'</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>				slideshow.<font color="#660066">showNext</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			<font color="#009900">&#125;</font>&nbsp;<font color="#000066">else</font>&nbsp;<font color="#000066">if</font><font color="#009900">&#40;</font>event.<font color="#660066">keyCode</font>&nbsp;<font color="#339933">&amp;&amp;</font>&nbsp;event.<font color="#660066">keyCode</font>&nbsp;<font color="#339933">==</font>&nbsp;<font color="#CC0000">37</font>&nbsp;<font color="#339933">||</font>&nbsp;event.<font color="#660066">key</font>&nbsp;<font color="#339933">&amp;&amp;</font>&nbsp;event.<font color="#660066">key</font>.<font color="#660066">toLowerCase</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">==</font>&nbsp;<font color="#3366CC">'arrowleft'</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>				slideshow.<font color="#660066">showPrev</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			<font color="#009900">&#125;</font></li><li>		<font color="#009900">&#125;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	<font color="#000066">function</font>&nbsp;navigateSlide<font color="#009900">&#40;</font>slideshow<font color="#339933">,</font>&nbsp;event<font color="#339933">,</font>&nbsp;keyNav<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font>&nbsp;</li><li>		<font color="#006600">//&nbsp;user&nbsp;has&nbsp;interacted&nbsp;with&nbsp;the&nbsp;slideshow&nbsp;navigation&nbsp;-&gt;&nbsp;update&nbsp;visible&nbsp;slide</font></li><li>		<font color="#000066">var</font>&nbsp;target&nbsp;<font color="#339933">=</font>&nbsp;<font color="#009900">&#40;</font>&nbsp;Util.<font color="#660066">hasClass</font><font color="#009900">&#40;</font>event.<font color="#660066">target</font><font color="#339933">,</font>&nbsp;<font color="#3366CC">'js-slideshow__nav-item'</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#41;</font>&nbsp;<font color="#339933">?</font>&nbsp;event.<font color="#660066">target</font>&nbsp;<font color="#339933">:</font>&nbsp;event.<font color="#660066">target</font>.<font color="#660066">closest</font><font color="#009900">&#40;</font><font color="#3366CC">'.js-slideshow__nav-item'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#000066">if</font><font color="#009900">&#40;</font>keyNav&nbsp;<font color="#339933">&amp;&amp;</font>&nbsp;target&nbsp;<font color="#339933">&amp;&amp;</font>&nbsp;<font color="#339933">!</font>Util.<font color="#660066">hasClass</font><font color="#009900">&#40;</font>target<font color="#339933">,</font>&nbsp;<font color="#3366CC">'slideshow__nav-item--selected'</font><font color="#009900">&#41;</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>			slideshow.<font color="#660066">showItem</font><font color="#009900">&#40;</font>Util.<font color="#660066">getIndexInArray</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">navigation</font><font color="#339933">,</font>&nbsp;target<font color="#009900">&#41;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			slideshow.<font color="#660066">moveFocus</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">true</font><font color="#339933">;</font></li><li>			updateAriaLive<font color="#009900">&#40;</font>slideshow<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#009900">&#125;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	<font color="#000066">function</font>&nbsp;initAnimationEndEvents<font color="#009900">&#40;</font>slideshow<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		<font color="#006600">//&nbsp;remove&nbsp;animation&nbsp;classes&nbsp;at&nbsp;the&nbsp;end&nbsp;of&nbsp;a&nbsp;slide&nbsp;transition</font></li><li>		<font color="#000066">for</font><font color="#009900">&#40;</font>&nbsp;<font color="#000066">var</font>&nbsp;i&nbsp;<font color="#339933">=</font>&nbsp;<font color="#CC0000">0</font><font color="#339933">;</font>&nbsp;i&nbsp;<font color="#339933">&lt;</font>&nbsp;slideshow.<font color="#660066">items</font>.<font color="#660066">length</font><font color="#339933">;</font>&nbsp;i<font color="#339933">++</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>			<font color="#009900">&#40;</font><font color="#000066">function</font><font color="#009900">&#40;</font>i<font color="#009900">&#41;</font><font color="#009900">&#123;</font></li><li>				slideshow.<font color="#660066">items</font><font color="#009900">&#91;</font>i<font color="#009900">&#93;</font>.<font color="#660066">addEventListener</font><font color="#009900">&#40;</font><font color="#3366CC">'animationend'</font><font color="#339933">,</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font><font color="#009900">&#123;</font>resetAnimationEnd<font color="#009900">&#40;</font>slideshow<font color="#339933">,</font>&nbsp;slideshow.<font color="#660066">items</font><font color="#009900">&#91;</font>i<font color="#009900">&#93;</font><font color="#009900">&#41;</font><font color="#339933">;</font><font color="#009900">&#125;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>				slideshow.<font color="#660066">items</font><font color="#009900">&#91;</font>i<font color="#009900">&#93;</font>.<font color="#660066">addEventListener</font><font color="#009900">&#40;</font><font color="#3366CC">'transitionend'</font><font color="#339933">,</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font><font color="#009900">&#123;</font>resetAnimationEnd<font color="#009900">&#40;</font>slideshow<font color="#339933">,</font>&nbsp;slideshow.<font color="#660066">items</font><font color="#009900">&#91;</font>i<font color="#009900">&#93;</font><font color="#009900">&#41;</font><font color="#339933">;</font><font color="#009900">&#125;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			<font color="#009900">&#125;</font><font color="#009900">&#41;</font><font color="#009900">&#40;</font>i<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#009900">&#125;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	<font color="#000066">function</font>&nbsp;resetAnimationEnd<font color="#009900">&#40;</font>slideshow<font color="#339933">,</font>&nbsp;item<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		setTimeout<font color="#009900">&#40;</font><font color="#000066">function</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font><font color="#009900">&#123;</font>&nbsp;<font color="#006600">//&nbsp;add&nbsp;a&nbsp;delay&nbsp;between&nbsp;the&nbsp;end&nbsp;of&nbsp;animation&nbsp;and&nbsp;slideshow&nbsp;reset&nbsp;-&nbsp;improve&nbsp;animation&nbsp;performance</font></li><li>			<font color="#000066">if</font><font color="#009900">&#40;</font>Util.<font color="#660066">hasClass</font><font color="#009900">&#40;</font>item<font color="#339933">,</font><font color="#3366CC">'slideshow__item--selected'</font><font color="#009900">&#41;</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>				<font color="#000066">if</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">moveFocus</font><font color="#009900">&#41;</font>&nbsp;Util.<font color="#660066">moveFocus</font><font color="#009900">&#40;</font>item<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>				emitSlideshowEvent<font color="#009900">&#40;</font>slideshow<font color="#339933">,</font>&nbsp;<font color="#3366CC">'newItemVisible'</font><font color="#339933">,</font>&nbsp;slideshow.<font color="#660066">selectedSlide</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>				slideshow.<font color="#660066">moveFocus</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">false</font><font color="#339933">;</font></li><li>			<font color="#009900">&#125;</font></li><li>			Util.<font color="#660066">removeClass</font><font color="#009900">&#40;</font>item<font color="#339933">,</font>&nbsp;<font color="#3366CC">'slideshow__item--'</font><font color="#339933">+</font>slideshow.<font color="#660066">animationType</font><font color="#339933">+</font><font color="#3366CC">'-out-left&nbsp;slideshow__item--'</font><font color="#339933">+</font>slideshow.<font color="#660066">animationType</font><font color="#339933">+</font><font color="#3366CC">'-out-right&nbsp;slideshow__item--'</font><font color="#339933">+</font>slideshow.<font color="#660066">animationType</font><font color="#339933">+</font><font color="#3366CC">'-in-left&nbsp;slideshow__item--'</font><font color="#339933">+</font>slideshow.<font color="#660066">animationType</font><font color="#339933">+</font><font color="#3366CC">'-in-right'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			item.<font color="#660066">removeAttribute</font><font color="#009900">&#40;</font><font color="#3366CC">'aria-hidden'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			slideshow.<font color="#660066">animating</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">false</font><font color="#339933">;</font></li><li>			Util.<font color="#660066">removeClass</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">element</font><font color="#339933">,</font>&nbsp;slideshow.<font color="#660066">animatingClass</font><font color="#009900">&#41;</font><font color="#339933">;</font>&nbsp;</li><li>		<font color="#009900">&#125;</font><font color="#339933">,</font>&nbsp;<font color="#CC0000">100</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	<font color="#000066">function</font>&nbsp;showNewItem<font color="#009900">&#40;</font>slideshow<font color="#339933">,</font>&nbsp;index<font color="#339933">,</font>&nbsp;bool<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		<font color="#000066">if</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">items</font>.<font color="#660066">length</font>&nbsp;<font color="#339933">&lt;=</font>&nbsp;<font color="#CC0000">1</font><font color="#009900">&#41;</font>&nbsp;<font color="#000066">return</font><font color="#339933">;</font></li><li>		<font color="#000066">if</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">animating</font>&nbsp;<font color="#339933">&amp;&amp;</font>&nbsp;slideshow.<font color="#660066">supportAnimation</font><font color="#009900">&#41;</font>&nbsp;<font color="#000066">return</font><font color="#339933">;</font></li><li>		slideshow.<font color="#660066">animating</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">true</font><font color="#339933">;</font></li><li>		Util.<font color="#660066">addClass</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">element</font><font color="#339933">,</font>&nbsp;slideshow.<font color="#660066">animatingClass</font><font color="#009900">&#41;</font><font color="#339933">;</font>&nbsp;</li><li>		<font color="#000066">if</font><font color="#009900">&#40;</font>index&nbsp;<font color="#339933">&lt;</font>&nbsp;<font color="#CC0000">0</font><font color="#009900">&#41;</font>&nbsp;index&nbsp;<font color="#339933">=</font>&nbsp;slideshow.<font color="#660066">items</font>.<font color="#660066">length</font>&nbsp;<font color="#339933">-</font>&nbsp;<font color="#CC0000">1</font><font color="#339933">;</font></li><li>		<font color="#000066">else</font>&nbsp;<font color="#000066">if</font><font color="#009900">&#40;</font>index&nbsp;<font color="#339933">&gt;=</font>&nbsp;slideshow.<font color="#660066">items</font>.<font color="#660066">length</font><font color="#009900">&#41;</font>&nbsp;index&nbsp;<font color="#339933">=</font>&nbsp;<font color="#CC0000">0</font><font color="#339933">;</font></li><li>		<font color="#006600">//&nbsp;skip&nbsp;slideshow&nbsp;item&nbsp;if&nbsp;it&nbsp;is&nbsp;hidden</font></li><li>		<font color="#000066">if</font><font color="#009900">&#40;</font>bool&nbsp;<font color="#339933">&amp;&amp;</font>&nbsp;Util.<font color="#660066">hasClass</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">items</font><font color="#009900">&#91;</font>index<font color="#009900">&#93;</font><font color="#339933">,</font>&nbsp;<font color="#3366CC">'sq7-hide'</font><font color="#009900">&#41;</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>			slideshow.<font color="#660066">animating</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">false</font><font color="#339933">;</font></li><li>			index&nbsp;<font color="#339933">=</font>&nbsp;bool&nbsp;<font color="#339933">==</font>&nbsp;<font color="#3366CC">'next'</font>&nbsp;<font color="#339933">?</font>&nbsp;index&nbsp;<font color="#339933">+</font>&nbsp;<font color="#CC0000">1</font>&nbsp;<font color="#339933">:</font>&nbsp;index&nbsp;<font color="#339933">-</font>&nbsp;<font color="#CC0000">1</font><font color="#339933">;</font></li><li>			showNewItem<font color="#009900">&#40;</font>slideshow<font color="#339933">,</font>&nbsp;index<font color="#339933">,</font>&nbsp;bool<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			<font color="#000066">return</font><font color="#339933">;</font></li><li>		<font color="#009900">&#125;</font></li><li>		<font color="#006600">//&nbsp;index&nbsp;of&nbsp;new&nbsp;slide&nbsp;is&nbsp;equal&nbsp;to&nbsp;index&nbsp;of&nbsp;slide&nbsp;selected&nbsp;item</font></li><li>		<font color="#000066">if</font><font color="#009900">&#40;</font>index&nbsp;<font color="#339933">==</font>&nbsp;slideshow.<font color="#660066">selectedSlide</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>			slideshow.<font color="#660066">animating</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">false</font><font color="#339933">;</font></li><li>			<font color="#000066">return</font><font color="#339933">;</font></li><li>		<font color="#009900">&#125;</font></li><li>		<font color="#000066">var</font>&nbsp;exitItemClass&nbsp;<font color="#339933">=</font>&nbsp;getExitItemClass<font color="#009900">&#40;</font>slideshow<font color="#339933">,</font>&nbsp;bool<font color="#339933">,</font>&nbsp;slideshow.<font color="#660066">selectedSlide</font><font color="#339933">,</font>&nbsp;index<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#000066">var</font>&nbsp;enterItemClass&nbsp;<font color="#339933">=</font>&nbsp;getEnterItemClass<font color="#009900">&#40;</font>slideshow<font color="#339933">,</font>&nbsp;bool<font color="#339933">,</font>&nbsp;slideshow.<font color="#660066">selectedSlide</font><font color="#339933">,</font>&nbsp;index<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#006600">//&nbsp;transition&nbsp;between&nbsp;slides</font></li><li>		<font color="#000066">if</font><font color="#009900">&#40;</font><font color="#339933">!</font>slideshow.<font color="#660066">animationOff</font><font color="#009900">&#41;</font>&nbsp;Util.<font color="#660066">addClass</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">items</font><font color="#009900">&#91;</font>slideshow.<font color="#660066">selectedSlide</font><font color="#009900">&#93;</font><font color="#339933">,</font>&nbsp;exitItemClass<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		Util.<font color="#660066">removeClass</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">items</font><font color="#009900">&#91;</font>slideshow.<font color="#660066">selectedSlide</font><font color="#009900">&#93;</font><font color="#339933">,</font>&nbsp;<font color="#3366CC">'slideshow__item--selected'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		slideshow.<font color="#660066">items</font><font color="#009900">&#91;</font>slideshow.<font color="#660066">selectedSlide</font><font color="#009900">&#93;</font>.<font color="#660066">setAttribute</font><font color="#009900">&#40;</font><font color="#3366CC">'aria-hidden'</font><font color="#339933">,</font>&nbsp;<font color="#3366CC">'true'</font><font color="#009900">&#41;</font><font color="#339933">;</font>&nbsp;<font color="#006600">//hide&nbsp;to&nbsp;sr&nbsp;element&nbsp;that&nbsp;is&nbsp;exiting&nbsp;the&nbsp;viewport</font></li><li>		<font color="#000066">if</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">animationOff</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>			Util.<font color="#660066">addClass</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">items</font><font color="#009900">&#91;</font>index<font color="#009900">&#93;</font><font color="#339933">,</font>&nbsp;<font color="#3366CC">'slideshow__item--selected'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#009900">&#125;</font>&nbsp;<font color="#000066">else</font>&nbsp;<font color="#009900">&#123;</font></li><li>			Util.<font color="#660066">addClass</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">items</font><font color="#009900">&#91;</font>index<font color="#009900">&#93;</font><font color="#339933">,</font>&nbsp;enterItemClass<font color="#339933">+</font><font color="#3366CC">'&nbsp;slideshow__item--selected'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#009900">&#125;</font></li><li>		<font color="#006600">//&nbsp;reset&nbsp;slider&nbsp;navigation&nbsp;appearance</font></li><li>		resetSlideshowNav<font color="#009900">&#40;</font>slideshow<font color="#339933">,</font>&nbsp;index<font color="#339933">,</font>&nbsp;slideshow.<font color="#660066">selectedSlide</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		slideshow.<font color="#660066">selectedSlide</font>&nbsp;<font color="#339933">=</font>&nbsp;index<font color="#339933">;</font></li><li>		<font color="#006600">//&nbsp;reset&nbsp;autoplay</font></li><li>		slideshow.<font color="#660066">pauseAutoplay</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		slideshow.<font color="#660066">startAutoplay</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#006600">//&nbsp;reset&nbsp;controls/navigation&nbsp;color&nbsp;themes</font></li><li>		resetSlideshowTheme<font color="#009900">&#40;</font>slideshow<font color="#339933">,</font>&nbsp;index<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#006600">//&nbsp;emit&nbsp;event</font></li><li>		emitSlideshowEvent<font color="#009900">&#40;</font>slideshow<font color="#339933">,</font>&nbsp;<font color="#3366CC">'newItemSelected'</font><font color="#339933">,</font>&nbsp;slideshow.<font color="#660066">selectedSlide</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#000066">if</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">animationOff</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>			slideshow.<font color="#660066">animating</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#003366">false</font><font color="#339933">;</font></li><li>			Util.<font color="#660066">removeClass</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">element</font><font color="#339933">,</font>&nbsp;slideshow.<font color="#660066">animatingClass</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#009900">&#125;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	<font color="#000066">function</font>&nbsp;getExitItemClass<font color="#009900">&#40;</font>slideshow<font color="#339933">,</font>&nbsp;bool<font color="#339933">,</font>&nbsp;oldIndex<font color="#339933">,</font>&nbsp;newIndex<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		<font color="#000066">var</font>&nbsp;className&nbsp;<font color="#339933">=</font>&nbsp;<font color="#3366CC">''</font><font color="#339933">;</font></li><li>		<font color="#000066">if</font><font color="#009900">&#40;</font>bool<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>			className&nbsp;<font color="#339933">=</font>&nbsp;<font color="#009900">&#40;</font>bool&nbsp;<font color="#339933">==</font>&nbsp;<font color="#3366CC">'next'</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">?</font>&nbsp;<font color="#3366CC">'slideshow__item--'</font><font color="#339933">+</font>slideshow.<font color="#660066">animationType</font><font color="#339933">+</font><font color="#3366CC">'-out-right'</font>&nbsp;<font color="#339933">:</font>&nbsp;<font color="#3366CC">'slideshow__item--'</font><font color="#339933">+</font>slideshow.<font color="#660066">animationType</font><font color="#339933">+</font><font color="#3366CC">'-out-left'</font><font color="#339933">;</font>&nbsp;</li><li>		<font color="#009900">&#125;</font>&nbsp;<font color="#000066">else</font>&nbsp;<font color="#009900">&#123;</font></li><li>			className&nbsp;<font color="#339933">=</font>&nbsp;<font color="#009900">&#40;</font>newIndex&nbsp;<font color="#339933">&lt;</font>&nbsp;oldIndex<font color="#009900">&#41;</font>&nbsp;<font color="#339933">?</font>&nbsp;<font color="#3366CC">'slideshow__item--'</font><font color="#339933">+</font>slideshow.<font color="#660066">animationType</font><font color="#339933">+</font><font color="#3366CC">'-out-left'</font>&nbsp;<font color="#339933">:</font>&nbsp;<font color="#3366CC">'slideshow__item--'</font><font color="#339933">+</font>slideshow.<font color="#660066">animationType</font><font color="#339933">+</font><font color="#3366CC">'-out-right'</font><font color="#339933">;</font></li><li>		<font color="#009900">&#125;</font></li><li>		<font color="#000066">return</font>&nbsp;className<font color="#339933">;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	<font color="#000066">function</font>&nbsp;getEnterItemClass<font color="#009900">&#40;</font>slideshow<font color="#339933">,</font>&nbsp;bool<font color="#339933">,</font>&nbsp;oldIndex<font color="#339933">,</font>&nbsp;newIndex<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		<font color="#000066">var</font>&nbsp;className&nbsp;<font color="#339933">=</font>&nbsp;<font color="#3366CC">''</font><font color="#339933">;</font></li><li>		<font color="#000066">if</font><font color="#009900">&#40;</font>bool<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>			className&nbsp;<font color="#339933">=</font>&nbsp;<font color="#009900">&#40;</font>bool&nbsp;<font color="#339933">==</font>&nbsp;<font color="#3366CC">'next'</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">?</font>&nbsp;<font color="#3366CC">'slideshow__item--'</font><font color="#339933">+</font>slideshow.<font color="#660066">animationType</font><font color="#339933">+</font><font color="#3366CC">'-in-right'</font>&nbsp;<font color="#339933">:</font>&nbsp;<font color="#3366CC">'slideshow__item--'</font><font color="#339933">+</font>slideshow.<font color="#660066">animationType</font><font color="#339933">+</font><font color="#3366CC">'-in-left'</font><font color="#339933">;</font>&nbsp;</li><li>		<font color="#009900">&#125;</font>&nbsp;<font color="#000066">else</font>&nbsp;<font color="#009900">&#123;</font></li><li>			className&nbsp;<font color="#339933">=</font>&nbsp;<font color="#009900">&#40;</font>newIndex&nbsp;<font color="#339933">&lt;</font>&nbsp;oldIndex<font color="#009900">&#41;</font>&nbsp;<font color="#339933">?</font>&nbsp;<font color="#3366CC">'slideshow__item--'</font><font color="#339933">+</font>slideshow.<font color="#660066">animationType</font><font color="#339933">+</font><font color="#3366CC">'-in-left'</font>&nbsp;<font color="#339933">:</font>&nbsp;<font color="#3366CC">'slideshow__item--'</font><font color="#339933">+</font>slideshow.<font color="#660066">animationType</font><font color="#339933">+</font><font color="#3366CC">'-in-right'</font><font color="#339933">;</font></li><li>		<font color="#009900">&#125;</font></li><li>		<font color="#000066">return</font>&nbsp;className<font color="#339933">;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	<font color="#000066">function</font>&nbsp;resetSlideshowNav<font color="#009900">&#40;</font>slideshow<font color="#339933">,</font>&nbsp;newIndex<font color="#339933">,</font>&nbsp;oldIndex<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		<font color="#000066">if</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">navigation</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>			Util.<font color="#660066">removeClass</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">navigation</font><font color="#009900">&#91;</font>oldIndex<font color="#009900">&#93;</font><font color="#339933">,</font>&nbsp;<font color="#3366CC">'slideshow__nav-item--selected'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			Util.<font color="#660066">addClass</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">navigation</font><font color="#009900">&#91;</font>newIndex<font color="#009900">&#93;</font><font color="#339933">,</font>&nbsp;<font color="#3366CC">'slideshow__nav-item--selected'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			slideshow.<font color="#660066">navCurrentLabel</font>.<font color="#660066">parentElement</font>.<font color="#660066">removeChild</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">navCurrentLabel</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			slideshow.<font color="#660066">navigation</font><font color="#009900">&#91;</font>newIndex<font color="#009900">&#93;</font>.<font color="#660066">getElementsByTagName</font><font color="#009900">&#40;</font><font color="#3366CC">'button'</font><font color="#009900">&#41;</font><font color="#009900">&#91;</font><font color="#CC0000">0</font><font color="#009900">&#93;</font>.<font color="#660066">appendChild</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">navCurrentLabel</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#009900">&#125;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	<font color="#000066">function</font>&nbsp;resetSlideshowTheme<font color="#009900">&#40;</font>slideshow<font color="#339933">,</font>&nbsp;newIndex<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		<font color="#000066">var</font>&nbsp;dataTheme&nbsp;<font color="#339933">=</font>&nbsp;slideshow.<font color="#660066">items</font><font color="#009900">&#91;</font>newIndex<font color="#009900">&#93;</font>.<font color="#660066">getAttribute</font><font color="#009900">&#40;</font><font color="#3366CC">'data-theme'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#000066">if</font><font color="#009900">&#40;</font>dataTheme<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>			<font color="#000066">if</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">navigation</font><font color="#009900">&#41;</font>&nbsp;slideshow.<font color="#660066">navigation</font><font color="#009900">&#91;</font><font color="#CC0000">0</font><font color="#009900">&#93;</font>.<font color="#660066">parentElement</font>.<font color="#660066">setAttribute</font><font color="#009900">&#40;</font><font color="#3366CC">'data-theme'</font><font color="#339933">,</font>&nbsp;dataTheme<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			<font color="#000066">if</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">controls</font><font color="#009900">&#91;</font><font color="#CC0000">0</font><font color="#009900">&#93;</font><font color="#009900">&#41;</font>&nbsp;slideshow.<font color="#660066">controls</font><font color="#009900">&#91;</font><font color="#CC0000">0</font><font color="#009900">&#93;</font>.<font color="#660066">parentElement</font>.<font color="#660066">setAttribute</font><font color="#009900">&#40;</font><font color="#3366CC">'data-theme'</font><font color="#339933">,</font>&nbsp;dataTheme<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#009900">&#125;</font>&nbsp;<font color="#000066">else</font>&nbsp;<font color="#009900">&#123;</font></li><li>			<font color="#000066">if</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">navigation</font><font color="#009900">&#41;</font>&nbsp;slideshow.<font color="#660066">navigation</font><font color="#009900">&#91;</font><font color="#CC0000">0</font><font color="#009900">&#93;</font>.<font color="#660066">parentElement</font>.<font color="#660066">removeAttribute</font><font color="#009900">&#40;</font><font color="#3366CC">'data-theme'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			<font color="#000066">if</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">controls</font><font color="#009900">&#91;</font><font color="#CC0000">0</font><font color="#009900">&#93;</font><font color="#009900">&#41;</font>&nbsp;slideshow.<font color="#660066">controls</font><font color="#009900">&#91;</font><font color="#CC0000">0</font><font color="#009900">&#93;</font>.<font color="#660066">parentElement</font>.<font color="#660066">removeAttribute</font><font color="#009900">&#40;</font><font color="#3366CC">'data-theme'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#009900">&#125;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	<font color="#000066">function</font>&nbsp;emitSlideshowEvent<font color="#009900">&#40;</font>slideshow<font color="#339933">,</font>&nbsp;eventName<font color="#339933">,</font>&nbsp;detail<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		<font color="#000066">var</font>&nbsp;event&nbsp;<font color="#339933">=</font>&nbsp;<font color="#000066">new</font>&nbsp;CustomEvent<font color="#009900">&#40;</font>eventName<font color="#339933">,</font>&nbsp;<font color="#009900">&#123;</font>detail<font color="#339933">:</font>&nbsp;detail<font color="#009900">&#125;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		slideshow.<font color="#660066">element</font>.<font color="#660066">dispatchEvent</font><font color="#009900">&#40;</font>event<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	<font color="#000066">function</font>&nbsp;updateAriaLive<font color="#009900">&#40;</font>slideshow<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		slideshow.<font color="#660066">ariaLive</font>.<font color="#660066">innerHTML</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#3366CC">'Item&nbsp;'</font><font color="#339933">+</font><font color="#009900">&#40;</font>slideshow.<font color="#660066">selectedSlide</font>&nbsp;<font color="#339933">+</font>&nbsp;<font color="#CC0000">1</font><font color="#009900">&#41;</font><font color="#339933">+</font><font color="#3366CC">'&nbsp;of&nbsp;'</font><font color="#339933">+</font>slideshow.<font color="#660066">items</font>.<font color="#660066">length</font><font color="#339933">;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	<font color="#000066">function</font>&nbsp;externalControlSlide<font color="#009900">&#40;</font>slideshow<font color="#339933">,</font>&nbsp;button<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font>&nbsp;<font color="#006600">//&nbsp;control&nbsp;slideshow&nbsp;using&nbsp;external&nbsp;element</font></li><li>		button.<font color="#660066">addEventListener</font><font color="#009900">&#40;</font><font color="#3366CC">'click'</font><font color="#339933">,</font>&nbsp;<font color="#000066">function</font><font color="#009900">&#40;</font>event<font color="#009900">&#41;</font><font color="#009900">&#123;</font></li><li>			<font color="#000066">var</font>&nbsp;index&nbsp;<font color="#339933">=</font>&nbsp;button.<font color="#660066">getAttribute</font><font color="#009900">&#40;</font><font color="#3366CC">'data-index'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			<font color="#000066">if</font><font color="#009900">&#40;</font><font color="#339933">!</font>index&nbsp;<font color="#339933">||</font>&nbsp;index&nbsp;<font color="#339933">==</font>&nbsp;slideshow.<font color="#660066">selectedSlide</font>&nbsp;<font color="#339933">+</font>&nbsp;<font color="#CC0000">1</font><font color="#009900">&#41;</font>&nbsp;<font color="#000066">return</font><font color="#339933">;</font></li><li>			event.<font color="#660066">preventDefault</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			showNewItem<font color="#009900">&#40;</font>slideshow<font color="#339933">,</font>&nbsp;index&nbsp;<font color="#339933">-</font>&nbsp;<font color="#CC0000">1</font><font color="#339933">,</font>&nbsp;<font color="#003366">false</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#009900">&#125;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>	<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	Slideshow.<font color="#660066">defaults</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#009900">&#123;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;element&nbsp;<font color="#339933">:</font>&nbsp;<font color="#3366CC">''</font><font color="#339933">,</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;navigation&nbsp;<font color="#339933">:</font>&nbsp;<font color="#003366">true</font><font color="#339933">,</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;autoplay&nbsp;<font color="#339933">:</font>&nbsp;<font color="#003366">false</font><font color="#339933">,</font></li><li>		autoplayOnHover<font color="#339933">:</font>&nbsp;<font color="#003366">false</font><font color="#339933">,</font></li><li>		autoplayOnFocus<font color="#339933">:</font>&nbsp;<font color="#003366">false</font><font color="#339933">,</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;autoplayInterval<font color="#339933">:</font>&nbsp;<font color="#CC0000">5000</font><font color="#339933">,</font></li><li>		navigationItemClass<font color="#339933">:</font>&nbsp;<font color="#3366CC">'slideshow__nav-item'</font><font color="#339933">,</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;navigationClass<font color="#339933">:</font>&nbsp;<font color="#3366CC">'slideshow__navigation'</font><font color="#339933">,</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;swipe<font color="#339933">:</font>&nbsp;<font color="#003366">false</font></li><li>&nbsp;&nbsp;<font color="#009900">&#125;</font><font color="#339933">;</font></li><li>&nbsp;</li><li>	window.<font color="#660066">Slideshow</font>&nbsp;<font color="#339933">=</font>&nbsp;Slideshow<font color="#339933">;</font></li><li>&nbsp;</li><li>	<font color="#006600">//initialize&nbsp;the&nbsp;Slideshow&nbsp;objects</font></li><li>	<font color="#000066">var</font>&nbsp;slideshows&nbsp;<font color="#339933">=</font>&nbsp;document.<font color="#660066">getElementsByClassName</font><font color="#009900">&#40;</font><font color="#3366CC">'js-slideshow'</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>	<font color="#000066">if</font><font color="#009900">&#40;</font>&nbsp;slideshows.<font color="#660066">length</font>&nbsp;<font color="#339933">&gt;</font>&nbsp;<font color="#CC0000">0</font>&nbsp;<font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>		<font color="#000066">for</font><font color="#009900">&#40;</font>&nbsp;<font color="#000066">var</font>&nbsp;i&nbsp;<font color="#339933">=</font>&nbsp;<font color="#CC0000">0</font><font color="#339933">;</font>&nbsp;i&nbsp;<font color="#339933">&lt;</font>&nbsp;slideshows.<font color="#660066">length</font><font color="#339933">;</font>&nbsp;i<font color="#339933">++</font><font color="#009900">&#41;</font>&nbsp;<font color="#009900">&#123;</font></li><li>			<font color="#009900">&#40;</font><font color="#000066">function</font><font color="#009900">&#40;</font>i<font color="#009900">&#41;</font><font color="#009900">&#123;</font></li><li>				<font color="#000066">var</font>&nbsp;navigation&nbsp;<font color="#339933">=</font>&nbsp;<font color="#009900">&#40;</font>slideshows<font color="#009900">&#91;</font>i<font color="#009900">&#93;</font>.<font color="#660066">getAttribute</font><font color="#009900">&#40;</font><font color="#3366CC">'data-navigation'</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">&amp;&amp;</font>&nbsp;slideshows<font color="#009900">&#91;</font>i<font color="#009900">&#93;</font>.<font color="#660066">getAttribute</font><font color="#009900">&#40;</font><font color="#3366CC">'data-navigation'</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">==</font>&nbsp;<font color="#3366CC">'off'</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">?</font>&nbsp;<font color="#003366">false</font>&nbsp;<font color="#339933">:</font>&nbsp;<font color="#003366">true</font><font color="#339933">,</font></li><li>					autoplay&nbsp;<font color="#339933">=</font>&nbsp;<font color="#009900">&#40;</font>slideshows<font color="#009900">&#91;</font>i<font color="#009900">&#93;</font>.<font color="#660066">getAttribute</font><font color="#009900">&#40;</font><font color="#3366CC">'data-autoplay'</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">&amp;&amp;</font>&nbsp;slideshows<font color="#009900">&#91;</font>i<font color="#009900">&#93;</font>.<font color="#660066">getAttribute</font><font color="#009900">&#40;</font><font color="#3366CC">'data-autoplay'</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">==</font>&nbsp;<font color="#3366CC">'on'</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">?</font>&nbsp;<font color="#003366">true</font>&nbsp;<font color="#339933">:</font>&nbsp;<font color="#003366">false</font><font color="#339933">,</font></li><li>					autoplayOnHover&nbsp;<font color="#339933">=</font>&nbsp;<font color="#009900">&#40;</font>slideshows<font color="#009900">&#91;</font>i<font color="#009900">&#93;</font>.<font color="#660066">getAttribute</font><font color="#009900">&#40;</font><font color="#3366CC">'data-autoplay-hover'</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">&amp;&amp;</font>&nbsp;slideshows<font color="#009900">&#91;</font>i<font color="#009900">&#93;</font>.<font color="#660066">getAttribute</font><font color="#009900">&#40;</font><font color="#3366CC">'data-autoplay-hover'</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">==</font>&nbsp;<font color="#3366CC">'on'</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">?</font>&nbsp;<font color="#003366">true</font>&nbsp;<font color="#339933">:</font>&nbsp;<font color="#003366">false</font><font color="#339933">,</font></li><li>					autoplayOnFocus&nbsp;<font color="#339933">=</font>&nbsp;<font color="#009900">&#40;</font>slideshows<font color="#009900">&#91;</font>i<font color="#009900">&#93;</font>.<font color="#660066">getAttribute</font><font color="#009900">&#40;</font><font color="#3366CC">'data-autoplay-focus'</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">&amp;&amp;</font>&nbsp;slideshows<font color="#009900">&#91;</font>i<font color="#009900">&#93;</font>.<font color="#660066">getAttribute</font><font color="#009900">&#40;</font><font color="#3366CC">'data-autoplay-focus'</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">==</font>&nbsp;<font color="#3366CC">'on'</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">?</font>&nbsp;<font color="#003366">true</font>&nbsp;<font color="#339933">:</font>&nbsp;<font color="#003366">false</font><font color="#339933">,</font></li><li>					autoplayInterval&nbsp;<font color="#339933">=</font>&nbsp;<font color="#009900">&#40;</font>slideshows<font color="#009900">&#91;</font>i<font color="#009900">&#93;</font>.<font color="#660066">getAttribute</font><font color="#009900">&#40;</font><font color="#3366CC">'data-autoplay-interval'</font><font color="#009900">&#41;</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">?</font>&nbsp;slideshows<font color="#009900">&#91;</font>i<font color="#009900">&#93;</font>.<font color="#660066">getAttribute</font><font color="#009900">&#40;</font><font color="#3366CC">'data-autoplay-interval'</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">:</font>&nbsp;<font color="#CC0000">5000</font><font color="#339933">,</font></li><li>					swipe&nbsp;<font color="#339933">=</font>&nbsp;<font color="#009900">&#40;</font>slideshows<font color="#009900">&#91;</font>i<font color="#009900">&#93;</font>.<font color="#660066">getAttribute</font><font color="#009900">&#40;</font><font color="#3366CC">'data-swipe'</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">&amp;&amp;</font>&nbsp;slideshows<font color="#009900">&#91;</font>i<font color="#009900">&#93;</font>.<font color="#660066">getAttribute</font><font color="#009900">&#40;</font><font color="#3366CC">'data-swipe'</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">==</font>&nbsp;<font color="#3366CC">'on'</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">?</font>&nbsp;<font color="#003366">true</font>&nbsp;<font color="#339933">:</font>&nbsp;<font color="#003366">false</font><font color="#339933">,</font></li><li>					navigationItemClass&nbsp;<font color="#339933">=</font>&nbsp;slideshows<font color="#009900">&#91;</font>i<font color="#009900">&#93;</font>.<font color="#660066">getAttribute</font><font color="#009900">&#40;</font><font color="#3366CC">'data-navigation-item-class'</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">?</font>&nbsp;slideshows<font color="#009900">&#91;</font>i<font color="#009900">&#93;</font>.<font color="#660066">getAttribute</font><font color="#009900">&#40;</font><font color="#3366CC">'data-navigation-item-class'</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">:</font>&nbsp;<font color="#3366CC">'slideshow__nav-item'</font><font color="#339933">,</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;navigationClass&nbsp;<font color="#339933">=</font>&nbsp;slideshows<font color="#009900">&#91;</font>i<font color="#009900">&#93;</font>.<font color="#660066">getAttribute</font><font color="#009900">&#40;</font><font color="#3366CC">'data-navigation-class'</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">?</font>&nbsp;slideshows<font color="#009900">&#91;</font>i<font color="#009900">&#93;</font>.<font color="#660066">getAttribute</font><font color="#009900">&#40;</font><font color="#3366CC">'data-navigation-class'</font><font color="#009900">&#41;</font>&nbsp;<font color="#339933">:</font>&nbsp;<font color="#3366CC">'slideshow__navigation'</font><font color="#339933">;</font></li><li>				<font color="#000066">new</font>&nbsp;Slideshow<font color="#009900">&#40;</font><font color="#009900">&#123;</font>element<font color="#339933">:</font>&nbsp;slideshows<font color="#009900">&#91;</font>i<font color="#009900">&#93;</font><font color="#339933">,</font>&nbsp;navigation<font color="#339933">:</font>&nbsp;navigation<font color="#339933">,</font>&nbsp;autoplay&nbsp;<font color="#339933">:</font>&nbsp;autoplay<font color="#339933">,</font>&nbsp;autoplayOnHover<font color="#339933">:</font>&nbsp;autoplayOnHover<font color="#339933">,</font>&nbsp;autoplayOnFocus<font color="#339933">:</font>&nbsp;autoplayOnFocus<font color="#339933">,</font>&nbsp;autoplayInterval&nbsp;<font color="#339933">:</font>&nbsp;autoplayInterval<font color="#339933">,</font>&nbsp;swipe&nbsp;<font color="#339933">:</font>&nbsp;swipe<font color="#339933">,</font>&nbsp;navigationItemClass<font color="#339933">:</font>&nbsp;navigationItemClass<font color="#339933">,</font>&nbsp;navigationClass<font color="#339933">:</font>&nbsp;navigationClass<font color="#009900">&#125;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li><li>			<font color="#009900">&#125;</font><font color="#009900">&#41;</font><font color="#009900">&#40;</font>i<font color="#009900">&#41;</font><font color="#339933">;</font></li><li>		<font color="#009900">&#125;</font></li><li>	<font color="#009900">&#125;</font></li><li><font color="#009900">&#125;</font><font color="#009900">&#40;</font><font color="#009900">&#41;</font><font color="#009900">&#41;</font><font color="#339933">;</font></li></ol></blockquote></code></pre></div><!-- Coding Board --><br><br><!-- Article Text --><div class="article text-component"><h3 class="hash-link imHeading3">How to enter codes in WebSite X5?</h3><p>Now, let's focus on the more complex part, that is, after viewing the codes and understanding their general functioning, we will now insert the codes into our WebSite X5 project.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>Firstly, it will be essential to set up the page where we want to insert our PHP plugin. To do this, we can go to <mark>Step 3 > Page Properties > Expert > Generated File Extension > Select "php"</mark>.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>After properly setting up the PHP page, we can now go to Step 4 of our page and insert an HTML Code Object. Once inserted, we can begin by putting in our plugin. First, we copy and paste the HTML code, which is the backbone of our slider. After this step, we can proceed with the insertion of the PHP code, by copying and pasting it where the <code>&lt;!-- INSERT THE PHP CODE HERE --&gt;</code> text is present. For practical reasons, we have not inserted the code integrally but proposed it in pieces like a puzzle, as the PHP code can be inserted into other codes according to our needs.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>After inserting the PHP code, it is essential to insert our database connection data, i.e., we need to replace the <code>localhost</code> entries from line 7 to 10 with those of our hosting service.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>Now it's time for the CSS code, which we will insert inside the Expert section of our HTML Code object.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>After inserting the CSS code, the penultimate step is to insert the JavaScript code. These two codes can be inserted at the end of our HTML code in two ways. We can save the codes in one or two files, for example, by creating a .txt text document and then changing the extension to .js simply by renaming it. Once the file is created, we can add it in the Expert section by attaching it with the "Add" button, selecting the "Link the file" option before confirming the upload. This way, the file will be inserted and connected correctly.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>Just as done with the JavaScript code, we can do the same with the CSS code mentioned earlier. That is, we paste the code into a text file and then change the extension from .txt to .css and attach the file in the same way.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>Alternatively, we can include the CSS code within the <code>&lt;style&gt;&nbsp;CODE&nbsp;HERE&nbsp;&lt;/style&gt;</code> tags, but also the JavaScript code, in the tags dedicated to it <code>&lt;script&gt;&nbsp;CODE&nbsp;HERE&nbsp;&lt;/script&gt;</code>, and then insert the complete code directly where we inserted the HTML code or alternatively in <mark>Step 3 > Page Properties > Expert > Custom Code</mark>.</p></div><!-- Article Text --><br><!---- &nbsp;File Start ----><link rel="stylesheet" href="../../assets/css/components/1_banner.css"><a onclick="javascript:_paq.push(['trackEvent', 'Download', 'Click', '_2_client-testimonials-carousel.zip']); target="_blank" rel="noopener noreferrer" href="https://www.gebher.com/quick/?link=zo5Vg75UQAmHYMTo84djlIYw5YIoYpc6x3r1Z7t163H43h80KD" class="banner banner--invert" aria-label="Download Now"><div class="banner__grid grid"><div class="col-6@md" aria-hidden="true"><div class="banner__figure" style="background-image: url(../../assets/img/pattern-animation.gif)"></div></div><div class="col-6@md"><div class="banner__text padding-md padding-lg@md"><h4>_2_client-testimonials-carousel.zip (Full Plugin)</h4><p class="margin-top-sm margin-top-lg@md"><span class="banner__link"><i>Download Now</i></span></p></div></div></div></a><!---- &nbsp;File End ----><br><!-- Article Text --><div class="article text-component"><p>In conclusion, the Client Testimonials Carousel code is a useful tool for managing user comments on WebSite X5 in an automated way and displaying user feedback effectively and visibly on the site's main page. However, you must have a basic understanding of PHP and database operations to use the code.</p></div><!-- Article Text --><br><br><br><!-- Article Text --><div class="article text-component"><h3 class="hash-link imHeading3">How to customize the Plugin?</h3><p>The PHP code offers further customization possibilities thanks to a simple change near line 21. To facilitate the use of the code, we have implemented two preset modes, both of which can be modified according to the user's preferences.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>To avoid errors, it is important to comment out the unused mode by adding two slashes <code>//</code> before the code. Alternatively, you can delete the mode you don't want to use.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>The two preset modes allow you to select comments based on the order in which they appear or based on the rating associated with each comment. In this way, it is possible to choose whether to show the best reviews randomly or to select the specific ones of most interest. This option is especially useful for showing site visitors the most helpful and helpful comments. We hope that the article has been useful to you and has provided you with interesting information! If you liked it, share it on social networks or with friends.</p></div><!-- Article Text --><!-- Promo Start --><br><section class="bg-light radius-lg inner-glow shadow-sm shadow-ring overflow-hidden padding-md"><div class="grid gap-md items-center"><div class="col-6@md"><div class="padding-left-md@lg"><div class="text-component"><h4 class="text-xl">Have ideas for new posts? Contact us! Comment or write.</h4><p class="color-contrast-medium">We are always looking for new interesting and stimulating topics to discuss and we are happy to evaluate your proposals. Comment below or send us an email and we will get back to you as soon as possible. Thanks for reading our blog!</p></div><div class="margin-top-sm"><div class="flex flex-wrap gap-sm items-center"><a target="_blank" rel="noopener noreferrer" href="../contacts.php" class="btn btn--primary">Submit Suggestion</a> <a href="../blog/index.php?category=Code_Nuggets" class="link color-contrast-higher">More Code Nuggets</a></div></div></div></div><div class="col-6@md"><figure class="width-100%"><img class="block width-100% radius-md" src="../../assets/img/cat-coding.gif" alt="Cat Coding"></figure></div></div></section></div><div><!---- &nbsp;Resources Start ----><br><br><br><div class="article text-component"><h5 class="hash-link imHeading4">Resources</h5></div><br><ul class="list-v3"><li class="list-v3__item flex gap-sm items-center@sm"><figure class="list-v3__figure"><img class="block width-100% object-cover" src="../../assets/img/list-v3-img.jpg" alt="Resources"></figure><div class="text-component text-space-y-sm"><h3 class="text-base"><a class="color-contrast-higher list-v3__link outsource" target="_blank" rel="noopener noreferrer" href="https://gebher.com/quick/?link=ds9eaaLEG2U2">Quelli del Cucuzzolo</a></h3><p class="text-sm color-contrast-medium">Original source where we took inspiration</p></div></li><li class="list-v3__item flex gap-sm items-center@sm"><figure class="list-v3__figure"><img class="block width-100% object-cover" src="../../assets/img/list-v3-img.jpg" alt="Resources"></figure><div class="text-component text-space-y-sm"><h3 class="text-base"><a class="color-contrast-higher list-v3__link outsource" target="_blank" rel="noopener noreferrer" href="https://gebher.com/quick/?link=9Davl5sFZCZ2ZX46TpuOKKoQDfdjm63sGF3zxh8Tj8jKYhp9Yn">CodyHouse</a></h3><p class="text-sm color-contrast-medium">Source from which we took the front-end structure</p></div></li></ul><!---- &nbsp;Resources End ----><br><br></div></div>]]></description>
			<pubDate>Fri, 31 Mar 2023 08:30:00 GMT</pubDate>
			<enclosure url="https://gebher.com/blog/files/client-testimonials-carousel-for-website-x5_codenuggets_gebher__thumb.jpg" length="111051" type="image/jpeg" />
			<link>https://gebher.com/blog/?client-testimonials-carousel-for-website-x5</link>
			<guid isPermaLink="false">https://gebher.com/blog/rss/000000042</guid>
		</item>
		<item>
			<title><![CDATA[Modify Web UI Custom File Browser Settings in WebSite X5]]></title>
			<author><![CDATA[Gebher Editorial Board]]></author>
			<category domain="https://gebher.com/blog/index.php?category=Code_Nuggets"><![CDATA[Code Nuggets]]></category>
			<category>imblog</category>
			<description><![CDATA[<div id="imBlogPost_000000040"><div><div><div class="alert alert--error alert--is-visible padding-sm radius-md text-sm js-alert" role="alert"><div class="flex items-center justify-between"><div class="flex items-center"><svg class="alert__icon icon icon--sm margin-right-xxs" viewBox="0 0 24 24" aria-hidden="true"><g fill="currentColor"><circle cx="12" cy="12" r="12" fill-opacity=".2"></circle><path d="M12 15a1 1 0 0 1-1-1V5a1 1 0 0 1 2 0v9a1 1 0 0 1-1 1z"></path><circle cx="12" cy="18.5" r="1.5"></circle></g></svg><p class="line-height-md"><strong>Critical Alert:</strong> By modifying the <strong>config.xml</strong> file you lose the possibility of inserting Images or Video Files into the WebSite X5 project using the integrated service and attaching them via URL. We recommend using the <strong>CTRL + Folder</strong> procedure, to temporarily disable the File Browser Web UI, to avoid losing software functionality.</p></div><button class="reset alert__close-btn margin-left-sm js-alert__close-btn"><svg class="icon icon--xs" viewBox="0 0 16 16"><title>Close alert</title><g fill="currentColor"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3l10 10"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 3L3 13"></path></g></svg></button></div></div></div></div><div><br></div><div><div class="article text-component"><h3 class="hash-link imHeading3">How to change the settings of the Web UI Custom File Browser in WebSite X5?</h3><p>Here is a <mark>step by step tutorial</mark> on how to change the settings of the WebSite X5 Pro configuration file <code>config.xml</code> to disable the file selection screen (File Web Browser IU).</p></div><br><div class="article text-component"><p>This guide describes how to change the settings of the WebSite X5 Pro and Evo <code>config.xml</code> configuration file, to deactivate the custom file selection screen (File Browser Web UI). This modification is necessary to overcome the limitations imposed by the File Browser Web UI introduced by the recent versions of WebSite X5 from the parent company Incomedia.</p></div><br><div class="article text-component"><p>The file selection screen introduced by Incomedia in WebSite X5 is considered by some users to be poor and slow to load, causing inconvenience and bad user experience. Furthermore, to open the original window of the operating system it is necessary to press the CTRL key simultaneously with pressing the folder, which can be inconvenient and cumbersome for users accustomed to other file selection methods.</p></div><br><div class="article text-component"><p>However, it is important to note that editing the <code>config.xml</code> configuration file can lead to certain risks, such as the malfunction of the software or the loss of data. Therefore, we recommend that you proceed with caution and always make a backup copy of the original configuration file before making any changes.</p></div><br><div class="article text-component"><p>In summary, modifying the WebSite X5 Pro configuration file <code>config.xml</code> to disable the file selection screen can bring some advantages in terms of speed and user experience, but also some risks in terms of compromised software operation or system security. Therefore, it is advised to proceed with caution and carefully weigh the pros and cons before making any changes.</p></div><br><br><br><div class="article text-component"><h3 class="hash-link imHeading3">Here are the steps to follow:</h3></div><br><article class="article text-component"><p class="text-md color-contrast-low" style=display:none>Steps</p><ol class="list list--ol"><li>Retrieve the <code>config.xml</code> file. The configuration file is located in <code>C:\Users\UserName\AppData\Local\Incomedia\WebSite X5&nbsp;-&nbsp;Pro</code> (or Evo). Open File Explorer and navigate to the indicated folder;</li><li>Copy the <code>config.xml</code> file to a safe location, as a backup. It is important to create a backup copy of the configuration file before making any changes;</li><li>Open the <code>config.xml</code> file with a text editor, such as Windows Notepad;</li><li>Look for the <code>&lt;FileBrowserWebUIDisabled&gt;</code> entry inside the file. Typically, it's near the end of the file;</li><li>Change the value of the entry from <code>false</code> to <code>true</code>. This change will disable the file selection screen;</li><li>Save the changes to the <code>config.xml</code> file and close the text editor;</li><li>Start WebSite X5 to verify that the changes have been applied correctly to the program.</li></ol></article><br><br><br><br><div class="article text-component"><p>Starting from the initial stage of the process, the first step is to retrieve the "config.xml" configuration file. This file is located in the <code>C:\Users\UserName\AppData\Local\Incomedia\WebSite X5&nbsp-&nbsp;Pro</code>, and the final name will depend on the software version in use, which can be "Pro" or "Evo". Note that the path provided in the initial step is for example purposes only. The "AppData" folder may not be visible, but still accessible depending on your configuration settings.</p></div><br><div class="article text-component"><p>Before making any changes to the configuration file, it is always a good idea to make a backup copy of the original file and save it in a preferred location. Once this stage is complete, the file can be opened with a text editor such as Notepad.</p></div><br><div class="article text-component"><p>Once the file is open, locate the line containing the <code>&lt;FileBrowserWebUIDisabled&gt;</code> entry and change the status to "true". After making this change, simply save the file and verify that the software is working properly.</p></div><br><div class="article text-component"><p>The file selection screen should now be disabled in WebSite X5. If you want to re-enable the file selection screen in the future, you can simply change the value of the <code>&lt;FileBrowserWebUIDisabled&gt;</code> entry from <code>true</code> to <code>false</code> in the file configuration file <code>config.xml</code>.</p></div><br><div class=code-highlight><div class="code-header margin-bottom-xs" style="text-align: right"><span class="file-name margin-bottom-md padding-sm padding-md@lg">XML</span> <button class="copy-button btn btn--sm btn--primary radius-full" style="background: var(--color-contrast-higher) !important; box-shadow: none !important"><svg stroke=currentColor fill=none stroke-width=2 viewbox="0 0 24 24" stroke-linecap=round stroke-linejoin=round class="h-4 w-4" height=1em width=1em xmlns=http://www.w3.org/2000/svg><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x=8 y=2 width=8 height=4 rx=1 ry=1></rect></svg>&nbsp;Copy Code</button></div><pre class=code-snippet><code class=language-javascript><blockquote>***<br><font color=#009900><font color=#000000>&lt;FileBrowserWebUIDisabled<font color=#000000>&gt;</font></font></font>true<font color=#0057AE><font color=#000000>&lt;/FileBrowserWebUIDisabled<font color=#000000>&gt;</font></font></font><br>***</blockquote></code></pre></div><br><br><div class="article text-component"><p>In addition to changing the <code>&lt;FileBrowserWebUIDisabled&gt;</code> entry, there are many other settings that can be changed in the WebSite X5 Pro configuration file <code>config.xml</code>. For example, you can change settings related to the appearance and structure of the website, such as background color, logo position and page layout.</p></div><br><div class="article text-component"><p>It is important to note that the <code>config.xml</code> configuration file contains a lot of information critical to the operation of the software, therefore it is advisable to avoid making any changes unless you have sufficient knowledge of the file format and the settings. Before making any changes, it is always advisable to create a backup copy of the original configuration file and to be careful not to accidentally delete or modify important parts of the file.</p></div><br><div class="article text-component"><p>Also, before changing any settings, it is advisable to check whether WebSite X5 Pro provides a configuration option in the software user interface. Many settings can be changed directly from the user interface, without having to make manual changes to the configuration file.</p></div><br><div class="article text-component"><p>In summary, modifying the settings in the WebSite X5 Pro <code>config.xml</code> configuration file can be useful for customizing and optimizing the software's operation. However, it is important to be careful not to make changes that could affect the functioning of the software and to always make a backup copy of the original configuration file before making any changes.</p></div><br><div class="article text-component"><p>In conclusion, modifying the WebSite X5 Pro configuration file <code>config.xml</code> to disable the file selection screen can be an effective solution to overcome the limitations imposed by the File Browser Web UI and improve the user experience. However, it is important to carefully consider the pros and cons of this change and proceed with caution to avoid any risks.</p></div><br><div class="article text-component"><p>If you found this guide useful, we invite you to share your opinion and your experience with other users, in order to contribute to the growth of the blog and provide useful information to the community. Also, if you have any suggestions or comments about this guide or any other topic that interests you, please contact us and provide us with your feedback. Thanks for reading us!</p></div></div></div>]]></description>
			<pubDate>Mon, 27 Feb 2023 18:09:00 GMT</pubDate>
			<enclosure url="https://gebher.com/blog/files/modify-web-ui-custom-file-browser-settings-in-website-x5_codenuggets_gebher__thumb.jpg" length="109443" type="image/jpeg" />
			<link>https://gebher.com/blog/?modify-web-ui-custom-file-browser-settings-in-website-x5</link>
			<guid isPermaLink="false">https://gebher.com/blog/rss/000000040</guid>
		</item>
		<item>
			<title><![CDATA[WebSite X5 Pro 2023.1 - New Version Review]]></title>
			<author><![CDATA[Gebher Editorial Board]]></author>
			<category domain="https://gebher.com/blog/index.php?category=WebSite_X5_News"><![CDATA[WebSite X5 News]]></category>
			<category>imblog</category>
			<description><![CDATA[<div id="imBlogPost_00000003C"><div><div><div class="alert alert--is-visible padding-sm text-sm radius-md js-alert" role="alert"><div class="flex items-center justify-between"><div class="flex items-center"><svg class="alert__icon icon icon--sm margin-right-xxs" viewbox="0 0 24 24" aria-hidden="true"><g fill="currentColor"><path fill-opacity=".2" d="M12 24a12 12 0 1 0 0-24 12 12 0 1 0 0 24z"></path><path d="M12 9a1 1 0 0 1 1 1l0 9a1 1 0 0 1-2 0l0-9a1 1 0 0 1 1-1z"></path><path d="M12 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 1 0 0 3z"></path></g></svg><p><strong>Latest News Available:</strong> Check out the great review on the brand new version of WebSite X5! Don't miss the opportunity to read the complete and updated article. Discover all the new features and incredible improvements of WebSite X5! <a href="https://www.gebher.com/blog/index.php?category=WebSite_X5_News" class="color-inherit" style="text-decoration: underline !important">Click here now</a></p></div><button class="reset alert__close-btn margin-left-sm js-alert__close-btn"><svg class="icon icon--xs" viewbox="0 0 16 16"><title>Close alert</title><g fill="currentColor"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3l10 10"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 3L3 13"></path></g></svg></button></div></div></div></div><div><br></div><div><div class="article text-component"><h3 class="hash-link imHeading3">Incomedia presented the new version of WebSite X5 Pro (v2023.1)</h3><p>A <mark>website creation software</mark> that offers a number of new features to improve user experience and search engine optimization (SEO).</p></div><br><br><div class="article text-component"><h3 class="hash-link imHeading3">What's says Changelog?</h3></div><br><article class="article text-component"><p class="text-md color-contrast-low" style=display:none>Changelog</p><ol class="list list--ol"><li>The <strong>first change</strong> concerns the <mark>Graphical Interface</mark>, which has been updated to adapt to the principles of Windows 11. The new interface makes the use of the software more comfortable and orderly, favoring the user's concentration and productivity. In fact, the new interface brings what is needed to the fore, simplifying navigation within the software;</li><li>The <strong>second novelty</strong> is the <mark>Edit from Preview mode</mark>. This feature allows you to click directly on the web page you are working on to open the corresponding Object in work mode. In this way, it is possible to intervene on the various parts of the page more quickly and efficiently;</li><li>The <strong>third novelty</strong>, available only for WebSite X5 Pro, concerns the definition of the <mark>minimum quantity that can be ordered</mark> for each product in your store. This allows you to speed up the order and purchase procedure, guaranteeing a more fluid and faster purchasing experience for the customer;</li><li>The <strong>fourth novelty</strong> concerns the <mark>Control for image lists</mark>. This feature allows you to compose the list of images visually, using thumbnails. In this way, the creation of image galleries is easier and more fun;</li><li>The <strong>fifth novelty</strong> concerns the <mark>New Templates</mark>. The Gallery of Predefined Templates has been updated with 10 new Templates for the Pro and 5 for the Evo. These new Templates offer more customization possibilities, allowing you to create unique and original websites;</li><li>The <strong>The sixth change</strong> concerns <mark>SEO Properties for Galleries</mark>. Images included in a Gallery also play an important role in search engine optimization. Thanks to the new version of WebSite X5 Pro, it is possible to specify the Description, Title and Alternative Text also for the images present in a Gallery, thus improving the visibility of the website on search engines;</li><li>Lastly, the <strong>seventh novelty</strong> regards <mark>Compatibility and Security</mark>. Incomedia has added support for servers using <strong>PHP v8.2</strong>, thus ensuring maximum performance, compatibility and security.</li></ol></article><br><br><br><div class="article text-component"><h3 class="hash-link imHeading3">Let's make a summary.</h3><p>The new version of WebSite X5 Pro offers many new features that improve the user experience and improve search engine optimization. Thanks to the new graphical interface, the possibility of editing directly from the Preview mode, the definition of the minimum orderable quantity, the control for image lists, the new Templates, the SEO properties for the Galleries and the updated compatibility and security, WebSite X5 .</p></div><br><div class="article text-component"><p>Also, with the new SEO property for galleries, users can now specify the description, title and alt text for images included in a gallery. This is a great advantage for SEO optimization of web pages, as search engines consider these details as important ranking factors.</p></div><br><div class="article text-component"><p>But that's not all. The new version of WebSite X5 Pro has also improved compatibility and security with the addition of support for servers using PHP v8.2. This means that websites created with WebSite X5 Pro will be more performing, stable and secure.</p></div><br><div class="article text-component"><p>Finally, it is important to underline Incomedia's attention to the user experience with the update of the graphical interface of the software that embraces the principles of Windows 11. The new interface makes the more comfortable, orderly work environment and favors user concentration, helping to improve productivity.</p></div><br><br><br><div class="article text-component"><h3 class="hash-link imHeading3">Our sincere opinion about this release.</h3><p>In summary, the new version of WebSite X5 Pro (v2023. 1) introduced several new features, including editing from preview mode, minimum order, control for image lists, new templates, SEO properties for galleries, improved compatibility and security and a new interface graphic face. These features will improve the user experience and offer more flexibility and power in creating professional websites.</p></div><br><div class="article text-component"><p>While the new version of WebSite X5 Pro presents some interesting new features, such as the updated graphical interface and the possibility to edit directly in preview mode, it is true that <mark>there is no substantial news on the blog and e-commerce side</mark>.</p></div><br><div class="article text-component"><p>Blogging and e-commerce are vital components for many online activities and, therefore, it would have been desirable to see more attention to these aspects in the new version of the software.</p></div><br><div class="article text-component"><p>For example, it would have been nice to see new features to help bloggers create c content more easily, such as better management of categories and labels, or tools to automate the publication of posts directly from the online panel.</p></div><br><div class="article text-component"><p>Also, as far as e-commerce is concerned, it would have been nice to have more options for customizing product pages and easier order management , without forgetting the need to be able to better manage the variants and related options of our products.</p></div><br><div class="article text-component"><p>In short, while the work done on other aspects of the software is appreciable, it is hoped that in the future there will be more efforts to improve the blogging and e-commerce experience on WebSite X5 Pro.</p></div><br><br><br><div class="article text-component"><h3 class="hash-link imHeading3">It is advisable to update or buy this new version?</h3><p>Upgrading to the new version of WebSite X5 Pro (v2023.1) can have both pros and cons depending on the user's needs.</p></div><br><div class="article text-component"><p>First, the pros of the update include a new GUI, which makes the use of the software even more comfortable and intuitive. Furthermore, the new editing functionality from Preview mode considerably simplifies the user's work, allowing him to intervene directly on the web page he is working on.</p></div><br><div class="article text-component"><p>The possibility of defining a minimum orderable quantity for the products in the store also makes the purchase procedure faster and more efficient for the customer , improving the shopping experience on the site.</p></div><br><div class="article text-component"><p>Moreover, the new compatibility with servers using PHP v8.2 guarantees greater performance and security for the website.</p></div><br><div class="article text-component"><p>On the other hand, the cons of the update may concern the fact that, as previously highlighted, there are no substantial changes regarding the functionality of the blogging and e-commerce. Those who make intensive use of these features may therefore not find sufficient interest in updating.</p></div><br><div class="article text-component"><p>Moreover, the purchase of a new license can represent a considerable cost for those who have already purchased a previous version of the software.</p></div><br><div class="article text-component"><p>In conclusion, if you use WebSite X5 mainly to create static websites and you don't have a specific need for new features for the blog or e-commerce, upgrading to the new version can be an excellent choice to improve the user experience and site security. However, if you make heavy use of missing features or if the upgrade represents a high cost, it may be better to wait for a future release that meets your specific needs.</p></div><br><div class="article text-component"><p>If you have decided to upgrade, don't miss the opportunity to try the new version of WebSite X5 Pro with an exclusive 25% discount! Thanks to its numerous advanced features and its intuitive graphical interface, you will be able to create professional websites quickly and easily.</p></div><br><div class="article text-component"><p>By purchasing the WebSite X5 Pro license, you will have access to all the new features of version 2023.1, including the preview editing mode, the minimum order for purchases, checking for image lists and much more. In addition, compatibility with PHP v8.2 ensures maximum security and compatibility with the latest servers.</p></div><br><section class="bg-light radius-lg inner-glow shadow-sm shadow-ring overflow-hidden padding-md"><div class="grid gap-md items-center"><div class="col-6@md"><div class="padding-left-md@lg"><div class="text-component"><h1 class="text-xl">Get WebSite X5 2023.1 Now!</h1><p class="color-contrast-medium">Don't miss the opportunity to improve your productivity and your online presence. Buy the WebSite X5 Pro or Evo license now with a 25% discount and start creating professional websites without limits.</p></div><div class="margin-top-sm"><div class="flex flex-wrap gap-sm items-center"><a href="../promo.php#websitex5_pro" class="btn btn--primary">Continue</a> <a href="https://www.gebher.com/website-x5-pro-design.php#websitex5_pro" class="link color-contrast-higher">View Discount Code</a></div></div></div></div><div class="col-6@md"><figure class="width-100%"><img class="block width-100% radius-md" src="../../assets/img/cta-banner-img-wsx5.jpg" alt="WebSite X5 Software"></figure></div></div></section><br></div></div>]]></description>
			<pubDate>Thu, 23 Feb 2023 13:14:00 GMT</pubDate>
			<enclosure url="https://gebher.com/blog/files/website-x5-pro-2023.1-review_gebher_thumb.jpg" length="197286" type="image/jpeg" />
			<link>https://gebher.com/blog/?website-x5-pro-2023-1-new-version-review</link>
			<guid isPermaLink="false">https://gebher.com/blog/rss/00000003C</guid>
		</item>
		<item>
			<title><![CDATA[Redirect Based on Geolocation]]></title>
			<author><![CDATA[Gebher Editorial Board]]></author>
			<category domain="https://gebher.com/blog/index.php?category=Code_Nuggets"><![CDATA[Code Nuggets]]></category>
			<category>imblog</category>
			<description><![CDATA[<div id="imBlogPost_000000039"><div><!-- Article Text --><div class="article text-component"><h3 class="hash-link imHeading3">How to Redirect Based on Geographic Location with JavaScript?</h3><p>Geotargeting is a <mark>technology that allows you to customize navigation based on your geographic location</mark>. This can be useful for providing personalized content, region-specific offers, and more. In this post, I'm going to show you how to create simple location-based redirect code using JavaScript and the <code>navigator.geolocation</code> method.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>This script uses the browser's geolocation API to get the user's current location. Once your location has been determined, the distance between your location and a specific point (London, in this case) is calculated using a distance calculator function. Finally, if the distance between the user's location and the specific point is greater than a certain radius (50 km, in this case), the user is redirected to an alert page.</p></div><!-- Article Text --><br><!-- Bulleted list --><article class="article text-component"><p class="text-ms color-contrast-low">Benefits</p><ul class="list list--ul"><li>It allows you to customize the user experience based on your geographic location;</li><li>Easy to use and understand;</li><li>It can be used for content targeting or advertising.</li></ul></article><!-- Bulleted list --><br><!-- Bulleted list --><article class="article text-component"><p class="text-ms color-contrast-low">Disadvantages</p><ul class="list list--ul"><li>Requires user permission to access its location;</li><li>Not all browsers support geolocation;</li><li>Location accuracy can be affected by external factors such as GPS coverage and the presence of obstacles.</li></ul></article><!-- Bulleted list --><br><!-- Coding Board --><div class="code-highlight"><div class="code-header margin-bottom-xs" style="text-align: right"><span class="file-name margin-bottom-md padding-sm padding-md@lg">JavaScript</span><button class="copy-button btn btn--sm btn--primary radius-full" style="background: var(--color-contrast-higher) !important; box-shadow: none !important"><svg stroke="currentColor" fill="none" stroke-width="2" viewbox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path><rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect></svg>&nbsp;Copy Code</button></div><pre class="code-snippet"><code class="language-javascript"><blockquote><ol><li><font color="#000066">if</font>&nbsp;<font color="#009900">(</font>navigator.<font color="#660066">geolocation</font><font color="#009900">)</font>&nbsp;<font color="#009900">{</font></li><li>&nbsp;&nbsp;navigator.<font color="#660066">geolocation</font>.<font color="#660066">getCurrentPosition</font><font color="#009900">(</font><font color="#000066">function</font><font color="#009900">(</font>position<font color="#009900">)</font>&nbsp;<font color="#009900">{</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000066">var</font>&nbsp;latitude&nbsp;<font color="#339933">=</font>&nbsp;position.<font color="#660066">coords</font>.<font color="#660066">latitude</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000066">var</font>&nbsp;longitude&nbsp;<font color="#339933">=</font>&nbsp;position.<font color="#660066">coords</font>.<font color="#660066">longitude</font><font color="#339933">;</font></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#006600">//&nbsp;London&nbsp;coordinates</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000066">var</font>&nbsp;londonLat&nbsp;<font color="#339933">=</font>&nbsp;<font color="#CC0000">51.509865</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000066">var</font>&nbsp;londonLng&nbsp;<font color="#339933">=</font>&nbsp;<font color="#339933">-</font><font color="#CC0000">0.118092</font><font color="#339933">;</font></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#006600">//&nbsp;Calculates&nbsp;the&nbsp;distance&nbsp;between&nbsp;the&nbsp;user's&nbsp;location&nbsp;and&nbsp;London</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000066">var</font>&nbsp;distance&nbsp;<font color="#339933">=</font>&nbsp;calculateDistance<font color="#009900">(</font>latitude<font color="#339933">,</font>&nbsp;longitude<font color="#339933">,</font>&nbsp;londonLat<font color="#339933">,</font>&nbsp;londonLng<font color="#009900">)</font><font color="#339933">;</font></li><li>&nbsp;</li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#006600">//&nbsp;If&nbsp;the&nbsp;distance&nbsp;is&nbsp;greater&nbsp;than&nbsp;a&nbsp;certain&nbsp;radius,&nbsp;it&nbsp;redirects&nbsp;to&nbsp;the&nbsp;warning&nbsp;page</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#000066">if</font>&nbsp;<font color="#009900">(</font>distance&nbsp;<font color="#339933">&gt;</font>&nbsp;<font color="#CC0000">50</font><font color="#009900">)</font>&nbsp;<font color="#009900">{</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.<font color="#660066">location</font>.<font color="#660066">href</font>&nbsp;<font color="#339933">=</font>&nbsp;<font color="#3366CC">"/warning.html"</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">}</font></li><li>&nbsp;&nbsp;<font color="#009900">}</font><font color="#009900">)</font><font color="#339933">;</font></li><li><font color="#009900">}</font></li><li>&nbsp;</li><li><font color="#006600">//&nbsp;Function&nbsp;to&nbsp;calculate&nbsp;the&nbsp;distance&nbsp;between&nbsp;two&nbsp;geographical&nbsp;points</font></li><li><font color="#000066">function</font>&nbsp;calculateDistance<font color="#009900">(</font>lat1<font color="#339933">,</font>&nbsp;lon1<font color="#339933">,</font>&nbsp;lat2<font color="#339933">,</font>&nbsp;lon2<font color="#009900">)</font>&nbsp;<font color="#009900">{</font></li><li>&nbsp;&nbsp;<font color="#000066">var</font>&nbsp;R&nbsp;<font color="#339933">=</font>&nbsp;<font color="#CC0000">6371</font><font color="#339933">;</font>&nbsp;<font color="#006600">//&nbsp;radius&nbsp;of&nbsp;the&nbsp;Earth&nbsp;in&nbsp;km</font></li><li>&nbsp;&nbsp;<font color="#000066">var</font>&nbsp;dLat&nbsp;<font color="#339933">=</font>&nbsp;<font color="#009900">(</font>lat2&nbsp;<font color="#339933">-</font>&nbsp;lat1<font color="#009900">)</font>&nbsp;<font color="#339933">*</font>&nbsp;<font color="#009900">(</font><font>Math</font>.<font color="#660066">PI</font>&nbsp;<font color="#339933">/</font>&nbsp;<font color="#CC0000">180</font><font color="#009900">)</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;<font color="#000066">var</font>&nbsp;dLon&nbsp;<font color="#339933">=</font>&nbsp;<font color="#009900">(</font>lon2&nbsp;<font color="#339933">-</font>&nbsp;lon1<font color="#009900">)</font>&nbsp;<font color="#339933">*</font>&nbsp;<font color="#009900">(</font><font>Math</font>.<font color="#660066">PI</font>&nbsp;<font color="#339933">/</font>&nbsp;<font color="#CC0000">180</font><font color="#009900">)</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;<font color="#000066">var</font>&nbsp;a&nbsp;<font color="#339933">=</font>&nbsp;<font>Math</font>.<font color="#660066">sin</font><font color="#009900">(</font>dLat&nbsp;<font color="#339933">/</font>&nbsp;<font color="#CC0000">2</font><font color="#009900">)</font>&nbsp;<font color="#339933">*</font>&nbsp;<font>Math</font>.<font color="#660066">sin</font><font color="#009900">(</font>dLat&nbsp;<font color="#339933">/</font>&nbsp;<font color="#CC0000">2</font><font color="#009900">)</font>&nbsp;<font color="#339933">+</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font>Math</font>.<font color="#660066">cos</font><font color="#009900">(</font>lat1&nbsp;<font color="#339933">*</font>&nbsp;<font color="#009900">(</font><font>Math</font>.<font color="#660066">PI</font>&nbsp;<font color="#339933">/</font>&nbsp;<font color="#CC0000">180</font><font color="#009900">)</font><font color="#009900">)</font>&nbsp;<font color="#339933">*</font>&nbsp;<font>Math</font>.<font color="#660066">cos</font><font color="#009900">(</font>lat2&nbsp;<font color="#339933">*</font>&nbsp;<font color="#009900">(</font><font>Math</font>.<font color="#660066">PI</font>&nbsp;<font color="#339933">/</font>&nbsp;<font color="#CC0000">180</font><font color="#009900">)</font><font color="#009900">)</font>&nbsp;<font color="#339933">*</font></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<font>Math</font>.<font color="#660066">sin</font><font color="#009900">(</font>dLon&nbsp;<font color="#339933">/</font>&nbsp;<font color="#CC0000">2</font><font color="#009900">)</font>&nbsp;<font color="#339933">*</font>&nbsp;<font>Math</font>.<font color="#660066">sin</font><font color="#009900">(</font>dLon&nbsp;<font color="#339933">/</font>&nbsp;<font color="#CC0000">2</font><font color="#009900">)</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;<font color="#000066">var</font>&nbsp;c&nbsp;<font color="#339933">=</font>&nbsp;<font color="#CC0000">2</font>&nbsp;<font color="#339933">*</font>&nbsp;<font>Math</font>.<font color="#660066">atan2</font><font color="#009900">(</font><font>Math</font>.<font color="#660066">sqrt</font><font color="#009900">(</font>a<font color="#009900">)</font><font color="#339933">,</font>&nbsp;<font>Math</font>.<font color="#660066">sqrt</font><font color="#009900">(</font><font color="#CC0000">1</font>&nbsp;<font color="#339933">-</font>&nbsp;a<font color="#009900">)</font><font color="#009900">)</font><font color="#339933">;</font></li><li>&nbsp;&nbsp;<font color="#000066">var</font>&nbsp;d&nbsp;<font color="#339933">=</font>&nbsp;R&nbsp;<font color="#339933">*</font>&nbsp;c<font color="#339933">;</font></li><li>&nbsp;&nbsp;<font color="#000066">return</font>&nbsp;d<font color="#339933">;</font></li><li><font color="#009900">}</font></li></ol></blockquote></code></pre></div><!-- Coding Board --><br><!-- Article Text --><div class="article text-component"><p>This script is highly versatile and can be used in many situations where there is a need to tailor the user experience based on geographic location. For example, it can be used to show region-specific content, offer local promotions, or restrict access to content based on your geographic location.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>Also, this script can easily be adapted to work with other cities or locations. All that is required is to replace the London coordinates with the desired ones and adjust the radius as needed.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>It is also important to note that this script uses a function to calculate the distance between two geographic points based on coordinates. This function uses a distance calculation algorithm known as "Haversine's theorem", which allows you to calculate the distance between two points on the surface of a sphere (such as the Earth) accurately.</p></div><!-- Article Text --><br><!-- Article Text --><div class="article text-component"><p>In summary, this script provides a simple and flexible solution to customize user experience based on geographic location, making it an ideal solution for many web applications.</p></div><!-- Article Text --></div></div>]]></description>
			<pubDate>Sat, 11 Feb 2023 14:36:00 GMT</pubDate>
			<enclosure url="https://gebher.com/blog/files/redirect-based-on-geolocation_websitex5_thumb.jpg" length="631504" type="image/jpeg" />
			<link>https://gebher.com/blog/?redirect-based-on-geolocation</link>
			<guid isPermaLink="false">https://gebher.com/blog/rss/000000039</guid>
		</item>
		<item>
			<title><![CDATA[Samsung SmartTag+ review: to never lose anything]]></title>
			<author><![CDATA[Gebher Editorial Board]]></author>
			<category domain="https://gebher.com/blog/index.php?category=Buying_Tips"><![CDATA[Buying Tips]]></category>
			<category>imblog</category>
			<description><![CDATA[<div id="imBlogPost_000000032"><div>We know it well, the world of <em>smart trackers</em> has certainly not just been born and we already <span class="cf1">tried some</span> here on our pages years ago . However, there is no doubt that the great interest in this category of products has arisen in recent months, thanks above all to the advent of Apple AirTag (here the <span class="cf1">review</span> ) and <strong>Ultra Wide Band</strong> technology that allows you to accurately track objects at a short distance.</div><div>One of the companies that was most focusing on this technology is certainly Samsung which introduced UWB technology already in Note 20 Ultra and Galaxy Z Fold 2 and which in January announced the new <strong>SmartTag</strong> , the company's first tracker, together with its variant <em>Plus</em> , or rather the one equipped with UWB. Today we are trying this last variant, just a few weeks after its arrival in our country too.</div><div><strong>SmartTag+ is a small rounded black plastic</strong> block and you immediately notice how there is a hole in one corner to be able to pass a strap or a small carabiner through it, making it immediately clear what its primary purpose is: to be placed next to your set of keys, to a backpack or a pet's collar. This is because the point of <strong>SmartTag+</strong> is precisely to help you find something you have lost, using Bluetooth, UWB and more.</div><div><br></div><div><div>The first configuration is very simple: just bring SmartTag+ close to your Samsung smartphone and press the physical button. Pairing will begin, during which there will also be a first <em>firmware</em> update . You can associate it with a name and a type of product to which you have linked it. <strong>Samsung SmartTag+</strong> is only compatible with Samsung smartphones running at least Android 8.0, but you'll need Android 11 and one of Galaxy S21+, S21 Ultra, Note 20 Ultra or Z Fold 2 to take advantage of <span class="cf1">UWB</span> features .</div><div>Let's start from the basics: what happens if you lose your keys with a SmartTag+ attached? You can access your SmartThings app and check your last known location. Pressing "search nearby" will start the treasure hunt with an indicator that tells you how strong the Bluetooth signal is. The indication is a bit vague but if you have a little patience you will obviously reach your goal. In addition, when you are at a short distance you can start the <strong>"Find with the camera"</strong> which will start an AR visualization which will show in space an arrow directed towards the object and a "halo" of floating pixels around the area where the object should be found. object.</div></div><div><br></div><div><div>The advantage of <strong>AR visualization</strong> lies in giving a spatial indication and not just the physical distance of where you left your SmartTag+. However, we have noticed that it only works at close range and that in any case it does not take you exactly to the precise point but only in an area. In addition, in our tests it happened that the UWB function stopped working, until we removed and replaced the battery. In conclusion: it is much more practical to press the key to make it play. The volume is high and it is easy to find SmartTag+ in a few moments.</div><div>If, on the other hand, you lose your object out of Bluetooth range, at that point the <strong>Galaxy Find Network</strong> device network will come into play (ie all Galaxy with the option to track your device active). The first device that passes within the range of your <em>tracker</em> will signal the position to the servers in an encrypted way and you will receive a notification.</div><div>In our test it happened after about 4-5 hours from abandoning the tag, against about 30 minutes of AirTag. However, this result improves with the growth of the Galaxy network and is still acceptable for finding lost items. Unfortunately, however, it is not equipped with NFC and whoever finds your set of keys will not have any information to find the owner, anticipating the "treasure hunt".</div></div><div><br></div><div><div>As we have seen, therefore, SmartTag+ is a good tracker of lost items, but there are still various possible refinements to make it truly competitive with the Apple counterpart with which it has to be compared willy-nilly today. In addition, the security and anti-stalking part is a bit lacking. The only implementation is a manual search via SmartThings for non-our tags that are "following" us. Not particularly effective in our opinion and in any case it seems not to be implemented in the app yet (it will probably arrive with an update).</div><div>However, it has an interesting advantage: <strong>the physical button</strong> .</div><div>A double press will allow you, for example, to find the lost smartphone by making it ring, effectively reversing its use. And you can then program a single and long press to activate routines or control your SmartThings home automation (provided the products are compatible).</div><div>The button cell battery is a CR2032 and should guarantee <strong>about 10 months of autonomy</strong> . Obviously at the moment it is too early to confirm whether this data is valid.</div><div>There is still no price for Samsung SmartTag+ for Italy, but according to our calculations it should be around €45, or €10 more than the variant without UWB. A decidedly low price and would make it more expensive than the already expensive Apple product.</div></div><div><br></div><div><h4 class="imHeading4">FINAL JUDGEMENT</h4><div>Samsung SmartTag+ is a product that asserts itself in the panorama of tackers. However, its price is high and it doesn't really seem to offer anything more than the "non Plus" variant (which we recommend at this point). The whole product tracking aspect is room for improvement and UWB is not a real value add. Much better to make it play, with a higher volume than the competitors. Good for the presence of the hole (which allows you to save on accessories) and for the presence of a physical, programmable button that allows you to find your smartphone.</div></div><div><br></div><div><div><iframe sandbox="allow-popups allow-scripts allow-modals allow-forms allow-same-origin" style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-eu.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=gebher0b-21&o=29&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B08YK8FQJ8&linkId=83620ab6d378043c12db35c03a156cb9"></iframe></div></div></div>]]></description>
			<pubDate>Mon, 19 Dec 2022 13:19:00 GMT</pubDate>
			<enclosure url="https://gebher.com/blog/files/it-feature-locate-your-things-from-far-away-485104764_thumb.jpg" length="239236" type="image/jpeg" />
			<link>https://gebher.com/blog/?samsung-smarttag-plus-review-to-never-lose-anything</link>
			<guid isPermaLink="false">https://gebher.com/blog/rss/000000032</guid>
		</item>
		<item>
			<title><![CDATA[Flsun Super Racer (SR) Review: Fast Delta 3D Printer]]></title>
			<author><![CDATA[Gebher Editorial Board]]></author>
			<category domain="https://gebher.com/blog/index.php?category=Buying_Tips"><![CDATA[Buying Tips]]></category>
			<category>imblog</category>
			<description><![CDATA[<div id="imBlogPost_000000031"></div>]]></description>
			<pubDate>Sun, 18 Dec 2022 21:51:00 GMT</pubDate>
			<enclosure url="https://gebher.com/blog/files/gavin-allanwood-Q1NS-nISNIw-unsplash_thumb.jpg" length="1526633" type="image/jpeg" />
			<link>https://gebher.com/blog/?flsun-super-racer--sr--review--fast-delta-3d-printer</link>
			<guid isPermaLink="false">https://gebher.com/blog/rss/000000031</guid>
		</item>
		<item>
			<title><![CDATA[Ten ways to make your website more attractive]]></title>
			<author><![CDATA[Gebher Editorial Board]]></author>
			<category domain="https://gebher.com/blog/index.php?category=Digital_Trends"><![CDATA[Digital Trends]]></category>
			<category>imblog</category>
			<description><![CDATA[<div id="imBlogPost_00000002E">If you’re like most website owners, you want your website to look and function attractively to launch your business higher. You can make this dream a reality with a few tweaks and improvements. <div><br></div><div><h5 class="imHeading5">Here are some tips on how to make your website look better and more inviting:</h5><div><br></div><div><span class="fs13lh1-5"><b><strong>Utilize Hero Images</b></span><b class="fs13lh1-5"><span class="fs13lh1-5"></strong></span></b><span class="fs13lh1-5">– Hero images (i.e. large, eye-catching photos at the top of a website) give visitors a visual snapshot of what your business is all about. It grabs their attention and helps them get to know you better.</span></div><div><br></div><div><span class="fs13lh1-5"><b>Design for Mobile</b></span> – Ensure that your website has a responsive design and works well on mobile devices. A large percentage of visitors are mobile users and they want to be able to navigate your site easily.</div><div><br></div><div><span class="fs13lh1-5"><b>Include Call-to-Actions</b></span> – Including call-to-actions within your website takes visitors in the directions you want them to go. This can include ‘subscribe’ buttons, ‘contact us’ forms, or even product sales pages.</div><div><br></div><div><span class="fs13lh1-5"><b>Logo Design</b></span> – Make sure that your logo design is on point and clearly represents your business. Logos are important for businesses as it is the first thing that people see and can help make you stand out from your competition.</div><div><br></div><div><span class="fs13lh1-5"><b>User Experience</b></span> – Your website’s navigation and content should be user-friendly and make it easy for visitors to get around your site without getting lost or frustrated. Have a clearly laid out navigation bar with pertinent information that people need.</div><div><br></div><div><span class="fs13lh1-5"><b>Content</b></span> – Content is essential and helps portray your message. Make sure that your content is well written, clear, and relevant.</div><div><br></div><div><br></div><div>Ultimately, you want your website to look professional, make a good first impression, and encourage visitors to take action. Use these tips to ensure that your website is as attractive and inviting as possible.</div><div><br></div><div>Making your website more attractive is essential for potential customers. By following a few simple steps, you can make sure that visitors to your website are drawn in and stay on your site longer. </div><div><br></div><div>First, select topic areas that will be relevant to your visitors. Then create content around those topics. Content should be informative and easily readable. You can also consider including social media widgets or promotional offers to further engage your visitors.</div><div><br></div><div>Next, make sure the design of your website is modern and seamless. Having a clear, consistent layout helps your visitors navigate easily through your site. Choose colors and fonts that are pleasing to the eye, and use images that are relevant to the content on your website.</div><div><br></div><div>In addition to great design and content, having a fast loading website is key. Make sure your website is optimized for different devices, and use resources like page speed tests to make sure your website is running as quickly as possible.</div><div><br></div><div><br></div><div><div>Attracting more visitors to a website is key to success. There are several ways to make a website more attractive to visitors. From compelling content to selecting the right images, there are many ways to cause a lasting impression and enhance your audience's experience. Here are ten ways to make your website more attractive.</div><h4 class="imHeading4"><br>1. Create a professional design. </h4><div>Investing in creating a high-end design can have a big impact on the amount of visitors that stay on your site. Use an attractive color scheme, heart testing on various parts of your site, and attractive graphics to grab visitors' attention. <span class="fs13lh1-5">Creating a professional web design is essential for all businesses, large or small. Not only does it help your website look great, but it also increases the overall credibility of your business, setting you apart from other competitors. Here is why you should create a professional design for your website:</span></div><div><br></div><div>Appearance and user experience- When people visit your website, the first thing they see is your design. It sets the initial impression and can make or break your chances of gaining new customers. A professional design includes aspects such as easy navigation, responsive design, and good page loading speeds. All of which make the experience better for your users and more enjoyable.</div><div><br></div><div>Increased credibility and trust- Your website design can help establish your brand and show customers you take your business seriously. A professional design ensures your website is secure and that customers have a good experience overall. This helps build trust and credibility, encouraging customers to make purchases with you.</div><div><br></div><div>Search engine optimization- For your website to appear at the top of search engine results, it needs to be optimized. This includes aspects such as keyword optimization, loading times, and structural hierarchy. A professional design helps ensure these aspects are taken care of so that your site performs better in search engine results.</div><div><br></div><div>Additional value- A professional design adds value to your website by incorporating layout, fonts, images and content that makes it more appealing to potential customers. It also ensures you have an online presence that is easy to use and navigate, increasing the likelihood of customers finding the content they are looking for.</div><div><br></div><div>In conclusion, creating a professional design for your website is essential for businesses of all sizes. Not only can it help you stand out from other competitors, but also provide customers with an enhanced user experience. It also helps boost search engine rankings, add value to your business, and develop consumer trust. So, don’t wait any longer, start creating your professional web design today.</div><div><br></div><h4 class="imHeading4">2. Design an easy to use site. </h4><div>It doesn't matter how great your site is if it's difficult to navigate. Make sure your home page contains the most important information and that navigation between the various sections is intuitive. <span class="fs13lh1-5">Designing a website is an important part of ensuring your Information Technology (IT) is successful. A website that is easy to use and navigate makes life easier for your customers and helps to increase your conversion rates. If a website isn’t easy to use, your customers may look elsewhere.</span></div><div><br></div><div>A website should be designed with an emphasis on user experience. It should be simple, intuitive and allow users to find what they’re looking for quickly and easily. All too often, websites are cluttered up with information that isn’t necessary and make it difficult for the user to find what they need. This can lead to frustration and the user could end up leaving the site altogether.</div><div><br></div><div>Making sure the website is responsive is also vital. It needs to be optimised for mobile and tablet devices so users can have a pleasant experience regardless of the device they’re using. A website that isn’t mobile friendly will lose a large portion of its customers as many will opt for a more user friendly website on their cell phone or tablet.</div><div><br></div><div>Having a clear call to action is important too. The visitors should know what you want them to do and you should emphasise this with targeted messaging. Making the call to action clear and concise is crucial for driving conversions and sales.</div><div><br></div><div>Ultimately, a website should be designed with the user in mind. This means taking into account the user’s needs, preferences and behaviour. A well-designed website should feel like a natural extension of the brand and create a lasting impression on the user. If customers don’t enjoy the website they’ll likely look elsewhere, even if your site offers the best prices.</div><div><br></div><div>In conclusion, designing a website that is easy to use is essential if you want to achieve success in the digital world. It should be user-friendly, intuitive and optimised for mobile devices. Additionally, the call to action should be clear and help guide users through the purchasing process. A website that is designed with the user in mind will lead to higher conversion rates, better customer satisfaction and a successful online presence.</div><div><br></div><h4 class="imHeading4">3. Includes quality content. </h4><div>Quality content is key to attracting and retaining visitors. Make sure the information on your site is up-to-date and relevant, and provide helpful recommendations. <span class="fs13lh1-5">One of the most important aspects of running a successful website is providing high quality content. Quality content can be the difference between a successful website and one that struggles, and it’s no surprise why. Quality content is the backbone of any website, and it makes a website stand out from the competition.</span></div><div><br></div><div>Websites that include content of high quality tend to be more successful. Quality content gives the website an advantage in terms of visibility and reputation. High quality content is more likely to be shared and linked to. This can lead to increased website traffic, higher page ranking and more leads.</div><div><br></div><div>High quality content also sets a website apart from its competitors. Quality content speaks for itself, and visitors to the website are more likely to take its content seriously. This can also help to establish trust with potential customers and may even increase conversions.</div><div><br></div><div>Quality content also creates opportunities for lead generation. If a client is impressed with the content on a website, they may be more likely to return for future products or services. Quality content also gives website owners more opportunities to engage with their audience. Through discussions, polls, and customer feedback, a website owner can engage their audience and strengthen their relationship.</div><div><br></div><div>In short, quality content is essential for a successful website. Quality content encourages people to return to the website, builds trust with potential customers, and helps to increase page ranking. Quality content also allows website owners to engage with their customers, generating more leads and making them more competitive. As such, it is important to ensure that all new content being added to a website is of high quality. <span class="fs13lh1-5">Creating high-quality content is essential for businesses seeking to build a successful website. Whether you want to increase sales, attract new customers, boost customer engagement, or simply create an enjoyable experience for website visitors, high-quality content is your key to success. Here's why businesses need to prioritize content of a higher calibre.</span></div><div><br></div><div>First, high-quality content offers an edge over competitors by increasing search engine optimization (SEO). Search engine algorithms are designed to pick out higher quality websites and prioritize them in user searches. For example, if you create content that is optimised for keywords and easy to find, your website is more likely to rank higher in search engine results. Quality content can also help increase your website's visibility and help create brand awareness.</div><div><br></div><div>High-quality content also helps build customer trust and loyalty. People are more likely to stay on your website and engage with your brand if they trust and see value in the content you provide. Quality content shows potential customers that your website is reliable, providing them with the information they need to make informed decisions. It can also make a great impression on customers who haven’t previously heard of your brand, and like most customers, they are likely to remember a company based on the quality of their content.</div><div><br></div><div>Finally, if visitors are engaged with your content it will create a positive customer experience. Customers today expect a lot more from brands, and if you're offering quality content that provides value, customers will be sure to come back for more. Quality content can also lead to increased sales, as customers become more familiar with your brand and products. </div><div><br></div><div>In short, high-quality content can help take your website to the next level and is the key to creating a successful online presence. Quality content helps boost SEO, build customer trust, and of course, provide an enjoyable experience for website visitors. So if your website has been struggling to find an audience, focus on creating high-quality content that provides value for your customers.</div><div><br></div><h4 class="imHeading4">4. Include beautiful images. </h4><div>High quality images are a must to make a website more interesting. Attractive images make a visitor's experience more engaging. <span class="fs13lh1-5">When it comes to website design, the visual element is something that can truly set a website apart from its competitors. Integrating beautiful photos or illustrations on your website can give it life, make it more appealing, and, in turn, can be a key factor in engaging a wider, online audience.</span></div><div><div><br></div><div>Beautiful images give a website a certain level of professionalism that is often hard to achieve in other ways. Using a high-quality visual element on the website can give the viewer an idea of the type of service being offered, or the standards that the website strives to meet. Even though the written content is important, a strong and appealing photograph or illustration can catch the attention of the viewer, and lead them to take further action. </div><div><br></div><div>Using beautiful imagery can also help implement brand recognition into a website. When the same image is seen repeatedly on the website, the viewer will automatically be associating the photo with the brand, and the website itself. This is a great way to attach a level of familiarity between the viewers, and the website. </div><div><br></div><div>Including beautiful images on your website is a great way to evoke emotion. Both genuine photographs, and creative illustrations can be used to help tell the story of the website, and effectively capture what the company stands for. A range of colours and tones can be used to relieve tension, and add a splash of fun. </div><div><br></div><div>In essence, including beautiful images on your website will not just add a visual element, but can be a way to effectively create a story around your brand. Yt will boost the quality of the website and subtly make the viewer familiar with the products and services you are offering.</div></div><h4 class="imHeading4">5. Create a blog. </h4><div>Users are interested in informative, engaging and original posts. Create a blog and update it with relevant information regularly. <span class="fs13lh1-5">Creating a blog is a great way to get your voice heard in a crowded online environment. A blog, or web log, is a personal website devoted to an individual’s opinions, thoughts and activities. Blogging can be a fun and creative way to express yourself and can have a variety of uses, from personal writing to business marketing.</span></div><div><br></div><div>Blogging has many advantages. It allows you to share your thoughts, interests and experiences with other people, build relationships and create a community. It’s also a great way to showcase your expertise and build credibility as an authority in your field. You can also use it to drive traffic to your website, which can result in increased sales and conversions.</div><div><br></div><div>One of the best things about creating and maintaining a blog is that it is relatively inexpensive. You can create a blog for free using platforms like WordPress, which offer an array of customization options and an easy-to-use interface. This makes it incredibly easy to get your blog up and running quickly and with minimal expense.</div><div><br></div><div>Another advantage of starting a blog is that it gives you the opportunity to express yourself in whichever way you feel most comfortable. You can post photographs, write stories, or even promote your business. This can give you the freedom to be creative and showcase your personality.</div><div><br></div><div>Creating a blog is a great way to share content, garner attention and make your voice heard. It can be a fun and creative outlet as well as a great way to promote your business or brand. It’s easy to set up, highly customizable and can be done on a budget—giving you the perfect platform to start expressing yourself!</div><div><br></div><h4 class="imHeading4">6. Offer diverse content. </h4><div>Make sure your site always has something interesting to offer. Video, audio, images, and text can all be used to make your site fun and engaging. <span class="fs13lh1-5">The importance of offering diverse content on your website cannot be underestimated. By providing an array of content, you can please a variety of target audiences and create a hub of content that your users want to keep coming back to. By offering different styles of content on your website, it can help you to improve your online visibility, add value to your users’ web-browsing experience, and ultimately boost your business’s bottom line.</span></div><div><br></div><div>One of the main benefits of offering content diversity is that it helps to keep your visitors interested in what you’re offering on your website. By providing different styles of content, like blog posts, videos, interviews, or presentations, it helps to keep users engaged and coming back to your website to find information. In addition, it helps attract new visitors to your website, as well. By offering different types of content, you can expose your website to a wider range of potential visitors.</div><div><br></div><div>Another benefit of offering diverse content is that it can have a positive impact on your search engine rankings. The more content that you provide on your website, the more likely it is that your website will get indexed and ranked by search engine algorithms. This means that more people will be able to find your website and land on your page when they’re searching for specific types of content.</div><div><br></div><div>Lastly, providing diverse content on your website can help you add value to your users’ experiences. When visitors find content on your website that they can’t find anywhere else, they are more likely to stick around and explore what you have to offer. This increased engagement on your website can help to boost your website’s reputation and help your business to stand out from the competition.</div><div><br></div><div>In summary, offering diverse content on your website is a great way to improve your online visibility and create a unique web-browsing experience for users. By providing an array of content, you can attract new visitors, rise in search engine rankings, and boost your bottom line.</div><div><br></div><h4 class="imHeading4">7. Update your site regularly. </h4><div>Make sure you update your website with new content often. <span class="fs13lh1-5">With technology constantly evolving and customers looking for the next best thing, updating your website regularly is an important part of keeping your business current and attractive. It can also help boost SEO, increase user engagement, improve credibility, and ultimately drive more sales.</span></div><div><br></div><div>Not only is keeping your website updated important for users, but it also reflects the overall brand of your business; staying current and up-to-date is essential if you want to stay competitive in today’s market.</div><div><br></div><div>Updating your website with new content, such as blogs and articles, will enable users to see that your business is an authority in your industry. It also helps boost SEO, which can help drive organic traffic and potentially convert visitors into customers. Additionally, fresh content can improve user engagement and overall user experience, leading to a better customer experience.</div><div><br></div><div>A regularly updated website also improves your credibility by demonstrating commitment and shows customers they will be able to find relevant information and products. This is especially true if you’re active on social media, as users will know they can find content and information on your website as well as their other digital platforms.</div><div><br></div><div>Updating your website regularly is a great way to drive more sales. With new content, users are more likely to come back to your site, shop around and potentially make a purchase. Additionally, it gives you the opportunity to showcase any new products and inform customers of any discounts or promotions.</div><div><br></div><h4 class="imHeading4">8. Use social networks. </h4><div>Social networks like Twitter, Facebook and YouTube can be a great way to promote your site and reach more people. <span class="fs13lh1-5">Social media has become an essential part of our lives. We use it to stay connected to our friends and family and to know what is happening in the world around us. But, it’s not just about staying connected; there are many advantages to using social media.</span></div><div><br></div><div>One of the biggest advantages of social media is that it is a great way to stay informed. You can find out about events, news, and other important developments in real time. You can also follow different people to see what kind of activities they are involved in. This can help you make informed decisions, such as when to buy a product or service, or which political candidates to support.</div><div><br></div><div>Another great benefit of social media is that it is extremely cost-effective. Since most networks, such as Facebook, Twitter, and Instagram, are free, you can save a significant amount of money on advertising. You can also target a particular audience or demographic, which can help you save money and maximize your reach. Additionally, when you advertise on social media, you can measure results with great accuracy. You can track engagement and obtain insights about your campaigns quickly and easily.</div><div><br></div><div>Finally, social media is a great way to build relationships. You can use it to stay in touch with your clients and customers, as well as to reach out to potential ones. This increases visibility, which can help you build your brand and generate more business.</div><div><br></div><div>Overall, social media has many advantages, and it is important to take advantage of them to get the most out of your online presence.</div><div><br></div><h4 class="imHeading4">9. Optimize your site for search engines. </h4><div>No matter how thoughtful your site design is and how interesting your content is, if you don't optimize it, it won't be seen by the people who use search engines to find information. <span class="fs13lh1-5">Optimizing your website for search engine results is essential in today's competitive online environment. When it comes to making sure your website is found by search engines, there are certain tactics and strategies you should consider to give your website the best chance for success.</span></div><div><br></div><div>The first step to optimizing your website for search engine results is to do keyword research. You want to find out what search terms and phrases people are using to find you online, and identify those that provide the most relevant search results for your website. Once you’ve identified your target keywords, you must ensure that they are present in all relevant on-page and off-page elements of your website, including page titles, description tags and headings. These elements help search engine bots identify and index your website, so make sure to include them.</div><div><br></div><div>Another important tactic for optimizing your website is to create quality content that is both relevant and engaging to your target audience. Content should be frequently updated to keep it fresh, and should contain keywords and phrases that have been identified in researching, as well as longertail keyword phrases. Good content ensures that your website is engaging and informative, while also helping with SEO.</div><div><br></div><div>You should also focus on building backlinks from other websites that are related to your topic. Backlinks help search engines discover your website and provide a ranking boost. If possible, you should choose backlinks from high-authority websites in your industry.</div><div><br></div><div>Finally, you need to make sure your website is user-friendly and easy to navigate. This includes optimizing the site design, making it mobile-responsive, and providing easy access to content. Ensuring that your website can be easily found and used by both users and search engines is essential for SEO success.</div><div><br></div><div>By following these tactics, you can help ensure that your website is optimized for best search engine results. This, in turn, will allow you to increase website traffic, attract new customers and grow your business.</div><div><br></div><h4 class="imHeading4">10. Use suitable slogans. </h4><div>Your visitors need to immediately understand what your content and products are all about. Use a clear tagline to communicate what you offer and how special your website is.</div><div><br></div><div>If you follow these steps, here are ten ways to make your website more attractive. Differently, high quality page design, engaging and interesting content, search engine optimization and the use of social networks can all help to increase the number of visitors to your website.</div></div><div><br></div><h3 class="imHeading3">Finally</h3><div>Adding customer testimonials and reviews can help attract new visitors to your website. People are more likely to try something new when they’ve heard good things from others. <span class="fs13lh1-5">This will help you draw more customers and possibly turn them into loyal customers.</span></div><div><br></div></div></div>]]></description>
			<pubDate>Wed, 14 Dec 2022 17:54:00 GMT</pubDate>
			<enclosure url="https://gebher.com/blog/files/pexels-yan-krukov-4458418_thumb.jpg" length="3837841" type="image/jpeg" />
			<link>https://gebher.com/blog/?ten-ways-to-make-your-website-more-attractive</link>
			<guid isPermaLink="false">https://gebher.com/blog/rss/00000002E</guid>
		</item>
		<item>
			<title><![CDATA[The World of Websites and Benefits]]></title>
			<author><![CDATA[Gebher Editorial Board]]></author>
			<category domain="https://gebher.com/blog/index.php?category=Tech_Tricks"><![CDATA[Tech Tricks]]></category>
			<category>imblog</category>
			<description><![CDATA[<div id="imBlogPost_00000002A"><div><h1 class="imHeading1">Introduction</h1><div>The World Wide Web is the interconnected system of networks, servers and websites that have transformed the way people communicate, interact and share information. With the internet rapidly becoming an integral part of daily life, websites have become essential for everyone from businesses to individuals. From connecting us with friends to providing us with a platform to share our thoughts and ideas, websites have revolutionized how we do our day-to-day activities. This thesis examines the world of websites, its benefits and its impact on society.</div><div><br></div><h3 class="imHeading3">1. The Benefits of Websites</h3><div>Websites come with a multitude of benefits, making them invaluable in our lives. One of the greatest advantages of websites is the ease of access they offer. Having a website enables us to instantly connect with people from around the world and to share our content with them. Websites also offer a great platform for businesses to promote their products and services. With a website, businesses can reach a wider audience in a cost-effective manner. Additionally, websites offer a great way to advertise products and services at a fraction of the cost of traditional advertising mediums.</div><div><br></div><h3 class="imHeading3">2. Types of Websites</h3><div>Websites come in a variety of forms, from simple personal pages to complex business applications. Each type of site is designed differently and caters to different needs and purposes. Personal websites can range from blogs to portfolios, and often provide a platform for people to share their stories and opinions. On the other hand, business websites are designed to assist customers in their search for a product or service. Business websites are also often used to showcase a company’s portfolio and promote its products and services. Furthermore, social media websites such as Facebook, Twitter, YouTube and Instagram give users the ability to network and interact with other people around the globe.</div><div><br></div><h3 class="imHeading3">3. Website Security</h3><div>One of the major concerns associated with websites is security. As websites play a vital role in the world’s economy, they are often targets of malicious attacks. In order to ensure a website is secure, the owner must deploy security measures such as website firewall and anti-virus, encrypting sensitive data and implementing strong passwords. Additionally, website owners must ensure their hosting companies are trustworthy and have strong security measures in place to ensure the website is safeguarded from potential attacks.</div><div><br></div><h3 class="imHeading3">Conclusion</h3><div>Websites have become an integral part of modern life, facilitating information sharing, communication and entertainment. With its numerous benefits, websites have revolutionized the way people interact and conduct business. In order to ensure their security, website owners must deploy the necessary measures to protect their sites from malicious activity. Given their far-reaching influence, websites have proven to be invaluable to all of us today.</div></div></div>]]></description>
			<pubDate>Wed, 07 Dec 2022 11:03:00 GMT</pubDate>
			<enclosure url="https://gebher.com/blog/files/jj-ying-8bghKxNU1j0-unsplash_thumb.jpg" length="789309" type="image/jpeg" />
			<link>https://gebher.com/blog/?the-world-of-websites-and-benefits</link>
			<guid isPermaLink="false">https://gebher.com/blog/rss/00000002A</guid>
		</item>
	</channel>
</rss>